解决微信小程序自定义tabbar点击态问题

• 2019 年 10 月 11 日
• 筆記

项目在使用ColorUI内的custom-tab-bar示例，发现在手机上测试时切换到其它tab，点击态有时候会跳到第一个tab页后然后才到我选中的tab，但是在开发者工具上又不会出现这种问题。

之后参考了微信小程序的文档的 示例代码片段，以及 社区上类似问题的帖子，感觉是小程序本身的问题。

今天再看了一遍自定义tabBar的文档，发现有这么一句话：

每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。

也就是说，每个tab页面都会有自己的组件实例，那么示例片段中selected初始化的值其实是有问题的。

Component({    data: {      selected: 0,      //...

在切换其它tab页面时会创建新的tabbar实例，那么这个selected的值会先是0，然后再由页面内pageLifetimes的show()来设置正确的selected值，这一段时间间隔就会导致点击态在第一个和我选择的tabbar之间跳动。

pageLifetimes: {      show() {          if (typeof this.getTabBar === 'function' &&              this.getTabBar()) {              this.getTabBar().setData({                  selected: 1              })          }      }  }

最后把custom-tab-bar中的默认的selected值改为null，避免初始化时使用了0而影响点击态。修改后，问题解决。