uniapp 如何自定义底部TabBar 且还能使用 uni.switchTab_uniapp自定义底部tabbar

1.隐藏tabBar

        在pages.json文件下 tabBar选项下有个 height配置项设置为0，这个时候uniapp自带的tabBar已经不会在显示了，当是你还是得需要吧你自定义tabBar所需的页面放进来

2.创建tabBar文件

        建议在你的项目下面创建一个components文件夹专门放你的自定义组件，然后在新建一个TabBar文件，这里的样式文件可以按照自己的喜好使用scss、less、css文件

直接废话不多说上代码

这个是index.vue文件下的代码 

{{item.name}}export default {props: {currentPath: { // 当前页面路径type: String,default: \'/pages/index/index\',},zIndex: { // 界面层级type: Number,default: 10}},data() {const color = \'#FFFFFF66\';const selectedColor = \'#FFF\';return {tabBars: [{name: \'首页\',iconPath: \'../../static/tabbar/index.png\',selectedIconPath: \'../../static/tabbar/selectd_index.png\',pagePath: \'/pages/index/index\',color,selectedColor,},{name: \'邀请\',iconPath: \'../../static/tabbar/lnvite.png\',selectedIconPath: \'../../static/tabbar/selectd_lnvite.png\',pagePath: \'/pages/lnvite/index\',color,selectedColor,},{name: \'VIP\',iconPath: \'../../static/tabbar/vip.png\',selectedIconPath: \'../../static/tabbar/selectd_vip.png\',pagePath: \'/pages/vip/index\',color,selectedColor,},{name: \'我的\',iconPath: \'../../static/tabbar/my.png\',selectedIconPath: \'../../static/tabbar/selectd_my.png\',pagePath: \'/pages/my/index\',color,selectedColor,},],ratio: 0,isLogin: false,}},mounted() {this.ratio = 100 / this.tabBars.length; uni.hideTabBar();},methods: {onNav(url) {if (this.currentPath !== url) uni.switchTab({url});}}}@import \'./index.scss\';

这个是index.scss文件下的代码

.content {position: fixed;bottom: 0;width: 100%;.tabber_box {display: flex;flex-direction: row;align-items: center;background: #151d33;padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx) ; // 适配iphoneX的底部padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx); /*兼容 IOS>11.2*/image {width: 56rpx;height: 56rpx;// margin-bottom: 16rpx;}.tabber_item {display: flex;flex-direction: column;align-items: center;font-size: 28rpx;}}}

3.引入到全局

在main.js / main.ts文件下 把写好的TabBar组件注册到全局中

4.如何使用

如果你的页面路径当前在 /pages/index/index 就引入在映入，同理你需要在那个页面显示切选择状态是这个页面 就吧currentPath 这个参数给当前页面路径

最终效果