uniapp 开发小程序的时候使用自定义 tabbar 时出现切换页面闪烁的情况

问题：在使用自定义组件的时候可以看到页面切换明显的闪烁, 这种体验是很不好的, 当然最好的方式就是使用原生导航栏, 不要搞花里胡哨的东西。

来看下体验不好的效果

优化调整

先说思路，就是仍然设置原生 tabbar, 在应用启动的时候主动隐藏原生 tabbar, 然后使用自定义组件来进行位置占位。

在 page.json 里面设置对应的tabbar字段,

  "tabBar": {     "color": "#727477",     "selectedColor": "#196FFF",     "borderStyle": "black",     "backgroundColor": "#FFFFFF",     "height": "105rpx",     "fontSize": "20rpx",     "list": [       {         "pagePath": "pages/home/home",         "text": "首页"       },       {         "pagePath": "pages/explore/explore",         "text": "发现"       },       {         "pagePath": "pages/training/training",         "text": "练习"       },       {         "text": "我的",         "pagePath": "pages/my/my"       }     ]   }, 

然后在 app.vue 文件里 launch 生命周期的时候隐藏原生的tabbar

onLaunch (() => {   uni.hideTabBar() }) 

最后在每个 tab 页面添加你自定义的 tabbar 组件, 自定义 tabbar 组件里面要使用 uni.switchTab 进行切换页面。

总结：本质上只不过是在原生 tabbar 页面添加了自定义 tabbar 组件, 我们只是把原生的隐藏了,然后用自定义组件进行了占位

可以看到优化后的效果, 在首次切换到我的页面的时候仍会有闪烁, 但是首次加载过后再次切换到页面就不再会有闪烁的问题了。