uniapp 自定义tabBar

uniapp 需要自定义tabBae 根据全向来展示tabBar的数据，
首先 pages.json 页面配置tabBar页面

只要 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

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');
        }
	
			
},

摘录链接：https://blog.csdn.net/JunVei/article/details/126969160