微信小程序踩坑 之 自定义tabbar切换图标bug_custom-tab-bar选中无反应

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

首先 从 **在开发者工具中预览效果 ** 点击获取custom-tab-bar组件代码，然后开始修bug

app.json 中配置 custom , app.json中全局声明 usingComponents

运行代码之后会发现：

tabbar图标切换 要点击两次才能有选中状态
解决办法：

1. 打开 custom-tab-bar 文件夹下的 index.wxml ,在 van-tabbar (结合 vant-weapp使用的)

<van-tabbar bind:change="switchTab">  
1

绑定监听事件 switchTab

2. 打开 custom-tab-bar 文件夹下的 index.js , 获取到当前切换到的页面 在tabbar 中的 索引下标

methods: {
    switchTab(e) {
      getApp().globalData.activeIdx = e.detail
      wx.switchTab({
        url: '/' + this.data.list[e.detail].pagePath
      })
    }
  }
1
2
3
4
5
6
7
8

3. 为了方便在其他页面获取共享值 activeIdx , 在项目根目录下 app.js 文件中添加

globalData: {
    activeIdx: 0
  }
1
2
3

4. 在每个tab 切换页面 的 onShow 时候再设置 下 activeIdx

onShow: function () {
    if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
      this.getTabBar().setData({
        activeIdx: 0
      })
    }
  }
1
2
3
4
5
6
7

5. 重新编译后即解决此bug