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

官方文档——自定义tabBar(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html)， “在开发者工具中预览效果” 可以下载相关代码

1.修改在app.json中的关于底部导航栏设置 "custom": true

"tabBar": {
   "custom": true,//这个设置为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.官方demo可以直接拿来使用，根目录下创建 custom-tab-bar文件夹，以及子文件（名字不能修改）

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

//修改custom-tab-bar/index.js 文件
const app = getApp();
Component({
 data: {
   selected: 0,            //当前选中的底部导航，从0索引开始
   color: "#7A7E83",
   selectedColor: "#3cc51f",
   list: []                //tabBar的数据
},
 lifetimes: {
   attached() {            //设置tabbar内容，可在别的页面中对list进行赋值达到动态效果
     this.setData({
       list: app.globalData.list//这里获取globalData里的list数据做为导航内容
    })
  },
},
 methods: {
   switchTab(e) {          //对点击tabbar进行跳转
     const data = e.currentTarget.dataset;
     const url = data.path;
     wx.switchTab({ url });
  }
}
})

4.设置导航数据 ，在app.js自定义globalData中添加数据，页面通过判断可以更改globalData.list从而更改导航

globalData: {
    "list": [{
     "pagePath": "page/component/index",
     "text": "组件"
  }, {
     "pagePath": "page/API/index",
     "text": "接口"
  }]
}    

5.在tabbar界面增加交互，代码放在onshow中

if (typeof this.getTabBar === 'function' &&this.getTabBar()){
  this.getTabBar().setData({
   selected: 0 //当前选中的底部导航，从0索引开始
  })
}

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