小程序-导航

Posted 2020-09-02

 现在每个小程序的底部基本都会有一个像这样的导航

1、需要准备图标（可以去图标库里去下载）

     准备选中和没选中时的2种颜色的图标

2、因为是进行全局配置，所以需要在全局的app.js文件中进行设置

  "tabBar": {
    "color":"#a9b7b7",
    "selectedColor":"red",
    "list": [
      {
        "selectedIconPath":"pages/images/movie1.png",
        "iconPath":"pages/images/movie.png",
        "pagePath": "pages/index/index",
        "text": "电影"
      },
      {
        "selectedIconPath":"pages/images/yy1.png",
        "iconPath":"pages/images/yy.png",
        "pagePath": "pages/cinema/cinema",
        "text": "影院"
      },{
        "selectedIconPath":"pages/images/yh1.png",
        "iconPath":"pages/images/yh.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },

3、tabBar的属性有color，selectedColor，backgroundColor，borderStyle（只接受black/white），list（接受pagePath（页面路径，必须在 pages 中先定义），text，iconPath，selectedIconPath）四个参数，position（默认bottom，设置top则为上面导航）