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

最新推荐文章于 2025-04-12 18:11:40 发布

gyl_sunshine

最新推荐文章于 2025-04-12 18:11:40 发布

阅读量1w

点赞数

文章标签：小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/gyl_sunshine/article/details/123233326

版权

本文介绍了如何解决uniApp小程序在使用自定义tabbar时页面刷新导致的闪烁问题。通过在pages.json中设置原生tabbar并隐藏，在页面运行时利用原生tabbar进行跳转，以及在app.vue中隐藏原生tabbar，可以有效避免闪烁。另外，还提及了一种替代方案，即将自定义tabbar作为主页面，但因改动较大未采用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说一下解决思路

就是在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,这一步很关键，如果用navi