uniapp自定义tabbar

uniapp自定义tabbar

一、封装组件

有时候会遇到无法用原生tabbar实现的需求，这时候就可以自行封装tabbar组件。封装不是重点，就不着重赘述了。但tabbar组件中一定要有激活和非激活状态，且必须保证tabbar选项在页面切换时正确激活。

二、让跳转后的页面项处于激活状态

封装完成后，再页面中引入组件进行使用。但运行程序测试时可以发现：由于tabbar是处于不同pages下的，数据不能共享。点击对应tabbar选项，无法正确让选项处于激活状态。这时就涉及到页面数据共享的问题了，可以想到以下几种方案：

1. 使用vuex或pinia之类的状态管理插件来共享激活页索引，在进行点击切换时修改状态即可。
2. 在页面跳转时传递要跳转页的索引，然后在跳转页中将数据传入给自定义的tabbar组件即可。

uni.switchTab({
	// 跳转时携带参数，其余页面中使用onLoad接收
	url:`/pages/${name}/${name}?current=${name}`
})

3. 全部内容都在一个页面，tabbar只有一个，其他内容局部跳转。

三、tabbar闪烁问题

如果在二中，我们使用了方案1或2，那么就会碰到tabbar切换页面时会随着页面一起刷新的问题。
解决方法：在pages.json里设置原生tabbar， 然后在页面运行的时候 ，将原生tabbar隐藏，进而解决闪烁问题。
可以参考如下方法：自定义tabbar闪烁问题