關于配置自定義tab-bar的方法可以參考微信官方文檔

如題：最近公司在做微信小程序，遇到了不同權限用戶有不同權限的需求，簡單的自定義tab-bar已無法滿足需要了。自己在網(wǎng)上搜了很多關于動態(tài)渲染對應tab-bar的案例，有的可以實現(xiàn)顯示對應權限tab-bar，但是切換點擊就會有選中樣式閃爍和不對應的問題。找了很久才找到，也非常感謝那位大佬教程，讓自己也有思路和想法，非常感謝哇！

廢話不說了，直接上代碼吧

在登錄成功的時候把權限標識存入app.js的全局數(shù)據(jù)（globalData）中，方便其他界面和組件讀取，提前在app.js的globalData中定義好對應權限的tabbar數(shù)組。

在custom-tab-bar（自定義組件）組件中賦值給對應的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
      })
    }
  }

請注意：這里很容易出問題： 默認是a權限，而登錄擁有b權限的后，tabbar還是原來默認權限a，而不是切換后的tabbar，所以app.global DATa.tabList還是默認值，因此要對全局的globalData的tabList數(shù)據(jù)進行監(jiān)聽才行。

注意：在監(jiān)聽的時候 getapp().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中定義好watch監(jiān)聽方法

// 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的值并且賦值，這里夾雜著Object.defineProperty，我搞的也不太清晰，反正正大改搞懂。所以說寫代碼思路真的很重要~~~~

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

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

可以在index組件（首頁）onSHow方法中去判斷，只需要在首頁中設置一次就可以了，不用每個tabbar界面去設置

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

或者這樣去設置

if(app.globalData.role==0){
        this.getTabBar().setData({
        list:app.globalData.tabList1,//這是權限1的tabbar
})
}else{
            this.getTabBar().setData({
        list:app.globalData.tabList2,//這是權限2的tabbar
})
}

到這里會發(fā)現(xiàn)可以在登錄后去動態(tài)更新tabbar了，是不是很神奇。先別急著開心，你會發(fā)現(xiàn)切換的時候發(fā)現(xiàn)選中的icon和樣式?jīng)]有切換過來，解決問題可以這樣來：

在對應的界面去設置選中，這里如index（首頁）的onShow方法中

onShow(){
       this.getTabBar().setData({

            selectedindex:0  //注意 tabbar界面從 0 1 2 3 ... 在每個對應組件onShow中設置對應的選中數(shù)組
})
}

這樣就搞定了權限動態(tài)調(diào)整tabbar的需求了。

參考連接：微信小程序動態(tài)設置tab-bar，解決自定義tabBar選中時的狀態(tài)變換：通過 getTabBar 接口獲取組件實例文章來源地址http://www.zghlxwxcb.cn/news/detail-487759.html

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