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

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

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

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

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

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

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

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

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

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

你可能感兴趣的:(解决微信小程序自定义tabbar点击态问题)