项目在使用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
而影响点击态。修改后,问题解决。
发表回复