评论

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

自定义tabbar切换tab页面时点击态闪动的解决方案

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

原文:https://tlingc.com/2019/10/solving-custom-tab-bar-selected-state-issue-of-wechat-miniprogram/

最后一次编辑于  10-02  
点赞 1
收藏
评论

3 个评论

  • 任小春
    任小春
    11-25

    selected设置为null后,反而初始化的时候,没状态了..

    11-25
    赞同
    回复 1
    • TLingC
      TLingC
      12-07
      状态在pageLifetimes里控制
      12-07
      回复
  • Denial
    Denial
    10-24


    楼上+1

    10-24
    赞同
    回复 1
    • TLingC
      TLingC
      11-08
      我通过以上的方法修改后已经没有出现闪动的问题,你说的图标闪动是否是点击态闪动?
      11-08
      回复
  • 磊
    10-22

    还是会有图标闪动的问题

    10-22
    赞同
    回复 5
    • TLingC
      TLingC
      11-08
      我通过以上的方法修改后已经没有出现闪动的问题,你说的图标闪动是否是点击态闪动?
      11-08
      回复
    • 飞蛇
      飞蛇
      11-21
      你好,解决了吗?我现在设置`selected:null`还是无用,依旧会来回跳
      11-21
      回复
    • 原野
      原野
      11-30
      他的意思是 进小程序初始化默认第一个没有了~~~
      11-30
      回复
    • 磊
      12-03
      好像还是不行,http://mmbiz.qpic.cn/mmbiz_gif/84ZwHofFkZs13CGemXw91zGYdMe44U5IIFF40egibPvTGzribibpbLJDErPrYc7U0FsgfiavGBiatdHQmrMUzSpTBibw/0?wx_fmt=gif
      12-03
      回复
    • 磊
      12-03
      你们看下这种,图标会闪
      12-03
      回复