微信小程式自定義tabbar,切換身份展示不同tabbar

小程式切換身份展示不同tabbar

效果圖

參考官網給的文檔

官網自定義tabbar文檔

本方式存在問題— 因為不同身份tabbar不同，用this.getTabBar().setData({list})，導緻第一次切換的時候會有一個瞬間的跳動，如果有解決方法，還請不吝賜教------以下正文

app.json中要設定tabbar list

"list": [
      {
        "pagePath": "index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "元件"
      },
      {
        "pagePath": "index/index2",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      },
      {
        "pagePath": "home/home1/home1",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "home1"
      },
      {
        "pagePath": "home/home2/home2",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "home2"
      },
      {
        "pagePath": "home/home3/home3",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "home3"
      }
    ]
           

引用官網的custom-tab-bar自定義元件修改index.js，删除list

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f"
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})
           

在引用的元件上通過getTabbar().setData()來修改list清單的tabbar item

Component({
  data: {
    index: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "元件"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "接口"
    }]
  },
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          list: this.data.index,
          selected: 0
        })
      }
    }
  }
})

           

其他元件同理，selected代表目前元件位于list的索引值

參考示例代碼

百度網盤連結

提取碼：wggw