本文使用到vant的van-tabbar组件来实现

---

一、uniapp整合vant ui

vant小程序版本：https://vant-contrib.gitee.io/vant-weapp/#/home
注：vant并没有uniapp的版本，所以此处是引入小程序版本的ui

1. 下载vant编译后代码
https://github.com/youzan/vant-weapp/tree/dev/dist
2. 在uniapp根目录创建文件夹：wxcomponents
将vant的dist目录重命名后复制至此处，目录结构如下图

3. 全局引入van-tabbar组件
pages.json

"globalStyle": {
	"usingComponents": {
		"van-tabbar": "/wxcomponents/@vant/weapp/tabbar/index",
		"van-tabbar-item": "/wxcomponents/@vant/weapp/tabbar-item/index"
	}
}

---

二、自定义组件整合van-tabbar

tab-bar.vue

<template>
	
	<van-tabbar placeholder :active="state.activeVal">
		<van-tabbar-item name="index" url="/pages/index" icon="home-o" link-type="switchTab">首页</van-tabbar-item>
		<van-tabbar-item name="my" url="/pages/my" icon="manager-o" link-type="switchTab">我的</van-tabbar-item>
	</van-tabbar>

</template>

<script setup>
	
	const app = getApp();
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { reactive, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance();
	let state = reactive({
		activeVal: props.name | app.globalData.tabbarActive
	});
	
	const props = defineProps({ name: '' })
	
	onShow(() => {
		const activeVal = props.name; state.activeVal = activeVal;
		app.globalData.tabbarActive = activeVal;
	})

	onLoad(() => { 
		// 在此处获取当前登录用户的导航栏权限，并过滤显示哪几个
		// 本文只做示例，应动态调整上文的van-tabbar-item
	})

</script>

<style lang="scss" scoped></style>

创建全局变量标记当前选择的导航栏：App.vue

<script>
	export default {
		globalData: {
			tabbarActive: 'index'
		}
	}
</script>

---

三、使用自定义组件

pages/index.vue

<template>
	<!-- name：当前页对应的导航栏name -->
	<tab-bar name='index'/>
</template>