自定义模拟tabbar页面

uniapp原生tabbar组件，性能非常好，但是自定义性很差
自定义模拟tabbar页面优点是自定义性非常强，但是却存在严重的性能缺陷。

现在提供一个解决方案，可以使用uni-app自带tabbar系统，保证性能的同时，又能尽情自定义tabbar导航栏

自定义tabbar场景，不建议在一个页面内通过几个组件，用v-if/v-show切换去模拟各个页面，而应该使用uni-app自带的tabbar系统，同时隐藏原生的tabbar， 再引入自定导航栏，这样可以保证原有性能，同时又能自定义tabbar，思路如下：

1
2
3
4
在pages.json中正常定义tabbar逻辑和字段，只需配置tabBar字段list中的pagePath(需以"/"开头)属性即可
在各个tabbar页面引入自定义tabbar组件，在自定义组件中通过uni.hideTabBar()隐藏系统tabbar
通过vuex引用同一份tabbar组件的list参数，这样可以做到修改某一个页面的tabbar数据，其他页面的tabbar也能同步更新
组件内部需要处理各种跳转的逻辑，在list参数中配置pagePath路径，此路径为pages.json中定义的tabbar字段的路径

参考 https://www.uviewui.com/components/tabbar.html