DevsDawn
DevsDawn

解决微信小程序自定义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而影响点击态。修改后,问题解决。

若无特别说明,本文采用 CC BY-SA 4.0 协议进行许可。如需转载,请附上本文链接和本声明。
本文链接:https://devsdawn.com/2019/10/solving-custom-tab-bar-selected-state-issue-of-wechat-miniprogram/
DigitalOcean云服务,美国上市公司,注册即送200USD体验金
Vultr云服务,全球25+地域,注册即送100USD体验金

发表回复

textsms
account_circle
email

DevsDawn

解决微信小程序自定义tabbar点击态问题
项目在使用ColorUI内的custom-tab-bar示例,发现在手机上测试时切换到其它tab,点击态有时候会跳到第一个tab页后然后才到我选中的tab,但是在开发者工具上又不会出现这种问题。 之后参考…
扫描二维码继续阅读
2019-10-02