小程序自定义tabbar闪动问题

Posted 2023-05-12

参考技术A 关于自定义tabbar在跳转的时候，tabbar因为是跟页面的一起绑定，所以会跟随页面一起出现，不是像官方的tabbar一样一直待在页面上。这就是闪动的根本所在。

针对闪动看了一个demo，是让tabbar定义为一个页面，然后让你要显示的页面一组件的形式，插入到tabbar的页面，这样tabbar一直在一个页面上所以就不存在，tabbar跟随页面滚动也就是闪动问题。

2019-2-14，又纠结到这个问题上，使用自定义tabbar使用wx.navigateTo会出现页面栈充满，然后不会跳转问题，使用wx.reLaunch等又会出现闪动太大不能接受问题，最后使用在主页面使用官方tabbar组件显示，其他页面需要tabbar的话使用自定义tabbar解决。

例子：https://gitee.com/js_yang/pro_win.git  这个项目，自定义tabbar组件

微信小程序 自定义tabbar 防止闪动

在我们平常自定义的tabbar 都会使用 wx.reLanch 进行跳转 这时候 都会闪一下页面在进行跳转 对于用户体验是不好的

解决方案

还是需要在 page.json 定义tabbar

"tabBar": 
			"color": "#FFFFFF",
			"selectedColor": "#CBB384",
			"backgroundColor": "#262F3D",
			"list": [
					"pagePath": "pages/index/index"
				,
				
					"pagePath": "pages/xxx/xxx"
				,
				
					"pagePath": "pages/xxx/xxx"
				, 
                
					"pagePath": "pages/xxx/xxx"
				
			]
		,

在进入index页面的时候 把tabbar 隐藏掉 使用 uni.hideTabBar() 接下来所有的跳转都使用原生跳tabbar 的方法就可以了wx.switchTab

缺点：刚进入第一次的tabbar的还是会闪 但是后面就不会了