微信小程序動態(tài)設(shè)置tab-bar（自定義）

配置自定義tab-bar的方法這里省略，可以參考官方文檔

動態(tài)設(shè)置tab-bar

需求：根據(jù)權(quán)限判斷底部tab-bar顯示內(nèi)容
例如普通用戶這里不顯示賽事tab，特殊用戶需要在進(jìn)入小程序的時候顯示賽事tab

實(shí)現(xiàn)方法

// app.js中請求當(dāng)前登錄權(quán)限，并將tab信息存到globalData中
// 請求回來之后判斷is_competition_on字段
// 賦值給globalData中的tabList（默認(rèn)只有兩項）

that.globalData.tabList = [
          {
            "pagePath": "",
            "text": "",
            "iconPath": "/images/tabbar/",
            "selectedIconPath": "/images/tabbar/"
          },
          {
            "pagePath": "/pages/competitions/index/index",
            "text": "賽事",
            "iconPath": "/images/tabbar/match.png",
            "selectedIconPath": "/images/tabbar/match-active.png"
          },
          {
            "pagePath": "",
            "text": "",
            "iconPath": "",
            "selectedIconPath": ""
          }
        ]

在custom-tab-bar組件中賦值給對應(yīng)的list

  attached() {
    let that = this
    that.setData({
      list: app.globalData.tabList
    })
    getApp().watch(that.watchBack.bind(that)) // 監(jiān)聽并回調(diào)
  },
  methods: {
    watchBack(list) {
       this.setData({
        list: list
      })
    },
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      console.log(data, this.data.list);
      console.log(e.currentTarget.dataset.index);
      wx.switchTab({
        url:url
      })
    }
  }

注意！??！由于請求權(quán)限時很有可能出現(xiàn)還沒請求回來就執(zhí)行了custom-tab-bar的attach方法，所以這個app.globalData.tabList很可能還是默認(rèn)值，所以需要對globalData的tabList數(shù)據(jù)進(jìn)行監(jiān)聽。

在監(jiān)聽這一步中g(shù)etApp().watch(that.watchBack.bind(that))需要注意

// 如果是getApp().watch(that.watchBack)
// 那么在watchBack回調(diào)函數(shù)中執(zhí)行this.setData 這個this指向的是undefined，因此需要改變this指向！
getApp().watch(that.watchBack.bind(that))
 // 這里試驗用call和apply無法改變this，原因后面來講

// app.js中使用Object.defineProperty監(jiān)聽 自定義watch函數(shù)
watch:function (method) {
    var obj = this.globalData;
    var temp = obj.tabList;
    Object.defineProperty(obj,"tabList", {
      configurable: true,
      enumerable: true,
      set: (value) => {
        temp = value
        method(value); // 這里回調(diào)傳值
      },
      get:function(){。
        return temp
      }
    })
  },

這樣下來就能正常的獲取到tabList的值并且賦值 夾雜知識點(diǎn)Object.defineProperty去復(fù)習(xí)

為什么call和apply不行

這里涉及到一個知識點(diǎn)
call，apply和bind的區(qū)別

具體可以參考這位博主的筆記
先來看使用call和apply改變this指向的報錯信息

method這里是app.js中watch傳參，這里就很清楚了，call和apply的返回值不是函數(shù)而是調(diào)用函數(shù)的返回值，因此這里會報is not a function這個錯誤。

動態(tài)設(shè)置tab-bar還有需要注意的地方就是點(diǎn)擊對應(yīng)的tab時需要自己進(jìn)行配置
實(shí)現(xiàn)方法是通過getTabBar()方法，具體也可以參考官方文檔。

經(jīng)過實(shí)際操作后測試發(fā)現(xiàn)這種方式有個很坑的問題，ios在加載tab-bar的時候，如果初始化時默認(rèn)值為兩個tab，動態(tài)生成三個，ios會采用初始化的值，應(yīng)該是用的緩存中的初始值，后續(xù)賦值就無效。

改進(jìn)：
將賦值放到頁面上操作，不在組件或者app.js中操作tabList的值。

在首頁onShow方法中判斷，

onShow() {
	//app.globalData.tabList2 為新值 ，app.globalData.tabList為初始化的值，判斷后根據(jù)實(shí)際情況賦值。
	 this.getTabBar().setData({
          list: app.globalData.tabList2,
        })
}

其他頁面也可以使用getTabBar().setData()來處理tabList的值。文章來源地址http://www.zghlxwxcb.cn/news/detail-498062.html

到了這里，關(guān)于微信小程序動態(tài)設(shè)置tab-bar的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！