uniapp 需要自定义tabBae 根据全向来展示tabBar的数据，
首先 pages.json 页面配置tabBar页面
image.png
只要 pagePath 就行
然后在根目录 创建 utils/ tabBar.js
// 主要权限
const member = [
{
"pagePath": "/pages/StoreHomePage/index",
"iconPath": require("../static/p1.png"),
"selectedIconPath": require("../static/p2.png"),
"text": "主页"
},
{
"pagePath": "/pages/VehicleRecoveryOrder/index",
"iconPath": require("../static/p3.png"),
"selectedIconPath": require("../static/p4.png"),
"text": "订单"
},
{
"pagePath": "/pages/My/index",
"iconPath": require("../static/p5.png"),
"selectedIconPath": require("../static/p6.png"),
"text": "我的"
}
]
//别的权限
const unloadVessel = [
{
"pagePath": "/pages/index/index",
"iconPath": require("../static/p1.png"),
"selectedIconPath": require("../static/p2.png"),
"text": "主页"
},
{
"pagePath": "/pages/My/index",
"iconPath":require("../static/p5.png"),
"selectedIconPath":require("../static/p6.png"),
"text": "我的"
}
]
export default {
member,//装船权限名 最后要存入 isMemberType里
unloadVessel//卸船权限名 最后要存入 isMemberType里
}
然后利用vuex 来进行保存 uniapp不用下载 直接引入
官网：https://uniapp.dcloud.net.cn/tutorial/vue3-vuex.html#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86vuex
image.png
modules/tabBar.js 中的内容
import tarBarUserType from '@/utils/tabBar.js';
const tabBar = {
state: {
// 判断是否已登录(member/notMember)
isMemberType: '',
// tabbar列表数据
tabBarList: []
},
mutations: {
setType(state, isMemberType) {
console.log(state,isMemberType,123);
state.isMemberType = isMemberType;
state.tabBarList = tarBarUserType[isMemberType];
}
}
}
export default tabBar;
store/index
import Vue from 'vue'
import Vuex from 'vuex'
// import { createStore } from 'vuex'
import tabBar from './modules/tabBar.js'
// import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
tabBar
},
state: {
//
zp: 'zp'
},
mutations: {
//
},
actions: {
//
},
getters : {
tabBarList: state => state.tabBar.tabBarList,
isMemberType: state => state.tabBar.isMemberType,
}
})
然后封装一个 公用组件
<template>
<view class="tab-bar">
<view class="content">
<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
<view>
<view class="tab-img">
<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
<image v-else class="img" :src="item.iconPath"></image>
</view>
</view>
<view class="tit">{{ item.text }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 底部导航栏数据
tabBarList: {
type: Array,
required: true
},
// 当前页面路径
routePath: {
type: String,
required: true
}
},
data() {
return {};
},
methods: {
selectTabBar(path) {
console.log(path);
this.$emit('onTabBar', path)
}
}
};
</script>
<style lang="scss" scoped>
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: 0rpx;
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
background-color: #fff;
border-top: 1px solid #e0e0e0;
padding-top: 5px;
// background-color: red;
// height:80rpx;
.content {
display: flex;
flex-direction: row;
.one-tab {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
// background-color: pink;
.tab-img {
width: 50rpx;
height: 50rpx;
.img {
width: 100%;
height: 100%;
}
}
.tit {
font-size: 25rpx;
transform: scale(0.7);
}
}
}
}
</style>
然后使用的页面
<template>
<view class="_abbr1">
<TabBer :tabBarList='tabBarList' routePath="/pages/index/index" @onTabBar="onTabBar" />
</view>
</template>
<script>
import TabBer from '@/components/TabBer/index.vue'
import store from '@/store/index.js';
export default {
components: {
TabBer
},
data() {
return {
}
},
computed: {
tabBarList() {
return store.getters.tabBarList
}
},
onLoad() {
// member
},
methods: {
onTabBar(path){
uni.switchTab({
url:path
})
},
}
}
</script>
<style scoped>
</style>
最后在APP.vue中 根据权限来显示展示什么tabBar
onShow: function() {
uni.hideTabBar({}); //隐藏tabbar
//根据 条件来展示
if(1==1){
store.commit('setType', 'unloadVessel');
}else{
store.commit('setType', 'myTabBar');
}
},
