微信小程序自定义tabbar，切换时图标闪现问题

参考了微信小程序官网提供的例子创建自定义tabbar，但出现了切换时图标闪现的问题。

先看官网例子：

custom-tab-bar --> index.js

custom-tab-bar --> index.js

其他tab页面 --> index.js

其他tab页面 --> index.js

根据官网提供的例子发现：自定义custom-tab-bar（注：为了方便后文直接使用tabbar表示）中记录当前tab选中状态的值，在点击其他tab时设置过一次值，在使用tabbar的页面中也设置了当前tab选中状态的值。为什么要重复设置两次当前页面选中状态的值？

通过在自定义组件生命周期函数created，attacted中输出内容到控制台，点击tabbar中的tab，查看控制台输出内容。

如图：

自定义tabbar生命周期函数 自定义tabbar 切换tab时，执行生命周期函数并将内容打印到控制台

从控制台中输出的内容可以看出：使用switchTab跳转页面后，tabbar自定义组件重新被创建、渲染。

因此在使用tabbar的页面中设置当前tab选中状态的值是必要的，让自定义组件页面在跳转后可以选中当前页面对应的tab。而自定义组件tabbar中切换tab时也设置了当前tab选中状态的值且默认值为0。因此使用switchTab跳转页面后，tabbar自定义组件重新被创建、渲染先默认选中第一个tab然后再选中当前页面所对应的tab。

实施：

把自定义tabbar中用于记录当前页面选中状态的初始值改为null，切换不同tab时，当前tab状态值也改为null。测试后发现模拟器有效但预览和真机调试时图标不会从第一个tab先选中，然后再选中当前tab了，但会出现当前tab图标闪现的问题。

如图：

尝试代码1

接着优化，切换不同tab时，删除设置当前tab状态值的代码。测试后发现模拟器、预览和真机调试时都更好了一点。
如图：

尝试代码2

大家有更好的方法或者有说的不对的地方欢迎留言一起讨论。