微信小程序自定义tabBar的图标选中问题_微信小程序自定义组件详解tabbar 图标选中不对

微信小程序自定义tabBar时图标选中问题

在使用自定义tabBar时要在目标目录的onShow函数中写入一段判断代码，否则图标的选中就会发生异常
自定义tabBar参考官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
在custom-tab-bar目录中js文件：

Component({
  data: {
    active: 0,
    list:[
      {
        path:"/pages/index1/index1",
        icon:"home-o",
        text:"首页"
      },
      {
        path: "/pages/chat/chat",
        icon: "apps-o",
        text: "分类"
      },
      {
        path: "/pages/mine/mine",
        icon: "setting-o",
        text: "我的"
      }
    ]
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        active: data.index
      })
      console.log(this)
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

则要在上述中的path：
/pages/index1/index1
/pages/chat/chat
/pages/mine/mine
的js文件中的onShow函数中加入以下代码条件判断图标是否选中

onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        active: 1  //这个数字是当前页面在tabBar中list数组的索引
      })
    }
  },
1
2
3
4
5
6
7

加入后图标选中正常