uni-app自定义底部tab并且根据字段显示和隐藏

首先将所有tab使用到的页面创建好并且在pages里面配置好，要在pages.json中的"tabBar里面配置"custom": true将自带的tab底部导航关闭

"pages": [{
"path": "pages/mine/mine",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/Operation/Operation",
"style": {
"navigationBarTitleText": "运维"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "服务"
}
},
{
"path" : "pages/shebe/shebe",
"style" : 
{
"navigationBarTitleText" : "设备"
}
}
],
"tabBar": {
"custom": true,
"color": "#7A7E83",
"selectedColor": "#1296db",
"borderStyle": "black",
"backgroundColor": "#F8F8F8",
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/imgs/imgs55.png",
"selectedIconPath": "static/imgs/imgs5.png"
},
{
"pagePath": "pages/Operation/Operation",
"text": "运维",
"iconPath": "static/imgs/imgs66.png",
"selectedIconPath": "static/imgs/imgs6.png"
},
{
"pagePath": "pages/shebe/shebe",
"text": "设备",
"iconPath": "static/imgs/imgs66.png",
"selectedIconPath": "static/imgs/imgs6.png"
},
{
"pagePath": "pages/index/index",
"text": "服务",
"iconPath": "static/imgs/imgs11.png",
"selectedIconPath": "static/imgs/imgs1.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "static/imgs/imgs44.png",
"selectedIconPath": "static/imgs/imgs4.png"
}
]
},

在uni-app官网找到官网插件搜索tab底部找到自己要用的插件如（custom-tab-bar 自定义底部导航栏 - DCloud 插件市场）

在每一个用到tab页面的底部使用

 <CustomTabBar modifyType="index"></CustomTabBar>
import CustomTabBar from "@/components/custom-tab-bar/index.vue";
export default {
    components: {
        CustomTabBar
    }
  },
}

中modifyType="index"中的index根据自己定义的路径来定，在那个页面用感觉那个页面来定

如我在mine页面用代码就是

  <CustomTabBar modifyType="mine"></CustomTabBar>
import CustomTabBar from "@/components/custom-tab-bar/index.vue";

如何根据权限设置tab显示几个，要找到我们引入的tab页面，然后根据相关要求进行更改

<template>
<view v-if="responseRoles.includes('sitemanage')">
<view class="tab-main">
<view class="tabs" :class="{ spaceCenter: tabList.length === 1 }">
<view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList"
:key="index" @click.stop="handleTab(item, index)">
<image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image>
<view class="text">{{ item.label }}</view>
</view>
</view>
</view>
</view>
<view v-if="responseRoles.includes('electricCollection')">
<view class="tab-main">
<view class="tabs" :class="{ spaceCenter: tabList.length === 1 }">
<view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabsTab"
:key="index" @click.stop="handleTab(item, index)">
<image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image>
<view class="text">{{ item.label }}</view>
</view>
</view>
</view>
</view>
<view v-if="responseRoles.includes('operation')">
<view class="tab-main">
<view class="tabs" :class="{ spaceCenter: tabList.length === 1 }">
<view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList"
:key="index" @click.stop="handleTab(item, index)">
<image class="img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image>
<view class="text">{{ item.label }}</view>
</view>
</view>
</view>
</view>

</template>

<script>
import {
appgetInfo
} from '@/src/api/api.js';
export default {
props: {
modifyType: {
type: String,
default: "",
},
},
computed: {
tabList() {
return this.tabs.filter((item) => item.show);
},
},
data() {
return {
currentIndex: 0,
responseRoles: [],
tabs: [{
label: "首页",
type: "home",
url: "/pages/home/home",
iconPath: "/static/imgs/imgs55.png",
selectedIconPath: "/static/imgs/imgs5.png",
show: true,
},
{
label: "运维",
type: "Operation",
url: "/pages/Operation/Operation",
iconPath: "/static/imgs/imgs66.png",
selectedIconPath: "/static/imgs/imgs6.png",
show: true,
},
{
label: "服务",
type: "index",
url: "/pages/index/index",
iconPath: "/static/imgs/imgs11.png",
selectedIconPath: "/static/imgs/imgs1.png",
show: true,
},
{
label: "我的",
type: "mine",
url: "/pages/mine/mine",
iconPath: "/static/imgs/imgs44.png",
selectedIconPath: "/static/imgs/imgs4.png",
show: true,
}
],
tabsTab: [{
label: "首页",
type: "home",
url: "/pages/home/home",
iconPath: "/static/imgs/imgs55.png",
selectedIconPath: "/static/imgs/imgs5.png",
show: true,
},
{
label: "设备",
type: "shebe",
url: "/pages/shebe/shebe",
iconPath: "/static/imgs/imgs66.png",
selectedIconPath: "/static/imgs/imgs6.png",
show: true,
},
{
label: "服务",
type: "index",
url: "/pages/index/index",
iconPath: "/static/imgs/imgs11.png",
selectedIconPath: "/static/imgs/imgs1.png",
show: true,
},
{
label: "我的",
type: "mine",
url: "/pages/mine/mine",
iconPath: "/static/imgs/imgs44.png",
selectedIconPath: "/static/imgs/imgs4.png",
show: true,
}
]
};
},
methods: {
handleTab(item, index) {
if (this.currentIndex === index) {
return;
}
uni.switchTab({
url: item.url,
});
},
async fetchTabData() {
try {
const response = await appgetInfo();
this.responseRoles = response.roles;

} catch (error) {
console.error("获取数据失败:", error);
}
},

},
mounted() {
this.fetchTabData();
if (this.modifyType.length) {
this.currentIndex = this.tabList.findIndex(
(item) => item.type === this.modifyType
);
if(this.currentIndex===-1){
this.currentIndex=1
};

}
},
};
</script>

<style lang="scss" scoped>
.tab-main {
position: fixed;
z-index: 9999;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
box-shadow: 0rpx -1rpx 0rpx 0rpx #ebedf0;

.tabs {
display: flex;
justify-content: space-between;
padding: 0 50rpx;
height: 120rpx;

.tab-item {
padding: 16rpx 50rpx;
display: flex;
align-items: center;
flex-direction: column;

.img {
width: 50rpx;
height: 50rpx;
}

.text {
margin-top: 12rpx;
font-size: 24rpx;
font-weight: 500;
color: #5d5d5d;
line-height: 24rpx;
}
}

.tab-item.active {
.text {
color: #4199d1;

}
}
}

.spaceCenter {
justify-content: center;
}
}
</style>

原文地址：https://blog.csdn.net/Wx001214/article/details/144025550

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！