tabbar图标切换 要点击两次才能有选中状态问题_vue选中tab为什么有时需要点两下标签样式才会改变

问题：tabbar图标切换 要点击两次才能有选中状态
原因：没有拷贝组件函数

---

官网中所给出的自定义组件地址：here
在 app.json 中添加：

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
"usingComponents": {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后，在list中至少关联两个页面。在官方示例案例 代码中获取到custom-tab-bar以及对应的image文件，在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
1
2
3
4

然后，简单修改custom-tab-bar/index.js中的list，使得和app.json中定义的一致。然后自己就以为没有了，就会出现标题所示的问题，即：需要点击两次才会切换图标为选中状态。

解决：

需要在每一个关联tabbar的页面的js文件中添加下面的代码：

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

其中selected: 0的值需要自己根据顺序指定值。然后，就不会有上述现象了。
当然，此事的页面中默认就是组件，如果需要这种方式使用，需要将每个page页对应的js文件的App删除，然后只保留Component部分，然后如果需要点击函数，就需要采用组件的方式，如：

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  },
  methods: {
    weizu: function(){
      console.log(123)
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在对应的wxml文件中进行事件绑定即可：

<view class="card-range" bindtap="weizu">打卡排行榜</view>
1

---

测试发现，其实这种方式不好，存在闪烁现象。
由于之前做过微信小程序的tabbar使用，记得有简单的方式，就考虑将custom-tab-bar文件删除掉，然后将 app.json 中的custom修改下为false：

"tabBar": {
    "custom": false,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

果然可以。就不再考虑使用自定义组件的方式来做tabbar了。