小程序底部導航欄動態生成

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中