参考了微信小程序官网提供的例子创建自定义tabbar,但出现了切换时图标闪现的问题。
先看官网例子:
custom-tab-bar --> index.js
其他tab页面 --> index.js
根据官网提供的例子发现:自定义custom-tab-bar(注:为了方便后文直接使用tabbar表示)中记录当前tab选中状态的值,在点击其他tab时设置过一次值,在使用tabbar的页面中也设置了当前tab选中状态的值。为什么要重复设置两次当前页面选中状态的值?
通过在自定义组件生命周期函数created,attacted中输出内容到控制台,点击tabbar中的tab,查看控制台输出内容。
如图:
从控制台中输出的内容可以看出:使用switchTab跳转页面后,tabbar自定义组件重新被创建、渲染。
因此在使用tabbar的页面中设置当前tab选中状态的值是必要的,让自定义组件页面在跳转后可以选中当前页面对应的tab。而自定义组件tabbar中切换tab时也设置了当前tab选中状态的值且默认值为0。因此使用switchTab跳转页面后,tabbar自定义组件重新被创建、渲染先默认选中第一个tab然后再选中当前页面所对应的tab。
实施:
把自定义tabbar中用于记录当前页面选中状态的初始值改为null,切换不同tab时,当前tab状态值也改为null。测试后发现模拟器有效但预览和真机调试时图标不会从第一个tab先选中,然后再选中当前tab了,但会出现当前tab图标闪现的问题。
如图:
接着优化,切换不同tab时,删除设置当前tab状态值的代码。测试后发现模拟器、预览和真机调试时都更好了一点。
如图:
大家有更好的方法或者有说的不对的地方欢迎留言一起讨论。