uniapp 小程序使用自定义tabbar时 页面刷新闪烁问题

先说一下解决思路

就是在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当成主页面 其他的东西当成组件引进来 这样子也可以解决善烁。 但是我这项目这样改  要改的话 动的地方太多 就没用。

猜你喜欢

转载自blog.csdn.net/gyl_sunshine/article/details/123233326