先说一下解决思路
就是在pages.json里设置原生tabbar, 在页面运行的时候 ,将原生tabbar隐藏 进而解决闪烁。
其实就是用自定义tabbar外观 用原生tabbar跳转。
分三步
1.pages.json中设置原生tabbar,跳转路径要与自定义保持一致
/* 增加原生tabbar 配合自定义tabbar使用 解决自定义tabbar闪烁问题 */
"tabBar": {
"backgroundColor":"#F3F2F0",
"borderStyle":"white",
"display":"none",
"list":[
{
"pagePath": "pages/index/index",
"text": ""
},
{
"pagePath": "pages/index/category",
"text": ""
},
{
"pagePath": "pages/index/authenticate",
"text": ""
},
{
"pagePath": "pages/index/cart",
"text": ""
},
{
"pagePath": "pages/index/user",
"text": ""
}
]
},
2.将自定义tabbar跳转转为switchTab,这一步很关键 ,如果用navigator其他跳转方式 ,底部tabbar还是会跟着页面刷新而闪烁的
uni.switchTab({
url:path
})
3.最后一步在app.vue 隐藏原生tabbar
OK,完成!
其实在网上查到还有另一种方法 就是把自定义tabbar当成主页面 其他的东西当成组件引进来 这样子也可以解决善烁。 但是我这项目这样改 要改的话 动的地方太多 就没用。