小程序底部导航栏动态生成

1.在app.json中增加关于底部导航栏的设置

"tabBar": {
    "custom": true,//这个要有,设置启用自定义tabbar
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "image/index-select.png",
        "iconPath": "image/index.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "image/info-select.png",
        "iconPath": "image/info.png",
        "pagePath": "pages/info/info",
        "text": "信息"
      }
    ]
  }

2.常见component：custom-tab-bar（名字不能修改）

3.再对自定义导航栏进行一些交互设置

const app = getApp();
Component({
  data: {
    selected: 0,            //当前选择的第几项，和自己写的样式有关系
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: []                //tabBar的数据
  },
  lifetimes: {
    attached() {            //设置tabbar内容，可在别的页面中对list进行赋值达到动态效果
      this.setData({
        list: app.globalData.list
      })
    },
  },
  methods: {
    switchTab(e) {          //对点击tabbar进行跳转
      const data = e.currentTarget.dataset;
      const url = data.path;
      wx.switchTab({ url });
    }
  }
})

4.在tabbar界面增加交互

if (typeof this.getTabBar === 'function' &&this.getTabBar()){
   this.getTabBar().setData({
    selected: 0 //与之前js中的一个意义
   })
}

将上述代码放在onshow中，到这边为止动态tabbar基本完成

5.因为tabbar的特性，切换tabbar使不会重新加载页面，所以需要将上一布中的代码加在onshow中，而不是onload中，一些需要每个页面显示后重现运行的函数也放在onshow中