小程序自定义tabbar并解决切换闪烁

一.背景

因我司自研小程序需要自定义tabbar，在简单研究之后发现只要在根目录下新建一个 custom-tab-bat 文件夹即可。（详见官方文档[：](自定义 tabBar | 微信开放文档 (qq.com))。但是在实现之后发现，在切换底部tabbar时，会有一个烦人的闪烁。

经过我仔细地研究之后发现，小程序官方实现tabbar是在每个页面都渲染出一个bar元素，但是其id不同。

因为小程序不同于单页面应用，本质上切换tabbar是在切换页面，在切换页面时必然出现一个初始化页面逻辑，因此每次切换页面时都会重新渲染一个新的tabbar。

由此闪烁的原因找到了。

但是在我在网站和社区中寻找解决方法时却发现，没有什么方式可以完美解决闪烁的问题。由于小程序的预加载机制，在页面缓存之后切换tabbar确实不会闪烁，但是在首次进入小程序后依然会有一次闪烁。官方社区中的开发小伙伴也都提出了很多问题，但至今未解决。

二.解决

我在想，小程序如果有一个独立的单页面就好了，将tabbar放在这个独立的页面下，其余页面都以路由的方式放置在这个单页面的内容区域，切换tabbar就是切换路由，这样不就不会有切换时页面加载的逻辑了！

！！！试一下！

首先，我将所有的tabbar都删掉，全都不需要。

然后我新建了一个小程序入口文件，依然叫做index，否则原有功能的路由跳转都要改动。将原来的入口文件改成home。

在这个新的入口文件中，添加自己的tabbar，并将原来需要使用自定义tabbar的页面全都改成组件，将其引入。

切换tabbar，就是切换组件的显示与隐藏~~~~

完美解决tabbar闪烁的问题

更新

评论有掘友说到生命周期的问题，确实页面改造成组件之后会涉及生命周期的改动，不过我自己在实现的时候并没有考虑这个问题且不影响代码的最终效果。

我又想出了另外一种解决方案就是，既然闪烁的根本原因是页面的加载导致元素的渲染出现一定的延迟，那么我提前加载出来页面不就好了么？

先使用官方自定义tabbar，在根目录新建tabbar文件夹。

在app.js中定义一个全局变量isLoad = 0，用来记录页面已经加载了几个，在onLanch方法中，让页面switchTab到第二个tab页。然后在第二个tab页的onLoad方法中让页面switchTab到第三个tab页，同时改变全局变量+1，依此类推，让最后一个需要跳转的tab页在页面全部加载完毕之后switchTab到原来需要展示的首页即可。另外需要在wxml中使用这个全局变量作为是否显示页面结构的标识，防止页面跳转时出现卡顿效果。

这种方式也可以完美解决闪烁的问题。但是缺点也显而易见，就是会导致首次加载小程序时页面变慢，tabbar页面越多，可能导致页面越慢。

如果大家有更好的方案，欢迎留言评论交流~~~~~~