uni-app dynamic tabBar, display different tabBar according to different users

1. API implementation of uni framework

Because we use the uni-app framework for development, we can directly create the uni-ui project when creating the project. This project template comes with some useful components and APIs of uni.

At first I thought that this effect would not be difficult to achieve, because there is also an official API that can be used directly, so my first attempt was to use uni's API, which is this: uni.setTabBarItem(options)

I also did it step by step according to the official documents, but the problem is that the API cannot change the pagePath. As a result, although the pictures and other configurations can be changed, the most critical thing is not changed, and the function I want is not realized.

 I felt that I might have misunderstood this sentence, which caused me to not fully implement this function. Then I went to the Dcloud community Q&A to see that some people had also encountered this problem, but there was no solution in the post, so I thought The only way to achieve this function is to customize the tabbar component.

 In short, this method is not fully implemented. If there is anyone who can solve this problem for me, you can send me a private message. Thank you very much! ! !

2. Component implementation

For the sake of efficiency, I directly use the Vant-Weapp component library to realize this function

2.1 Download vant library

npm i @vant/weapp -S --production

uniapp does not have a default package manager, you must first build one yourself

npm init -y

After creating it, you can download the vant package.

2.2 To use vant-tabbar, you need to import the corresponding file first

We find the vant package in node_modules and put it in the root directory. In order to facilitate our introduction

Place the dist file into a new folder

 Remember that the name of the total folder must be: wxcomponents, otherwise there will be no such file when running the WeChat applet

Introduce it like this in the pages.json file:

 My requirement is to put a login page on the homepage, with a user page and an admin page. Different users will see different pages.

My page settings are like this

 To simulate, I put two buttons in the index

<template>
	<view class="content">
		<button type="primary" @click="goUser">user</button>
		<button type="primary" @click="goAdmin">admin</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},

		methods: {
			goUser() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			goAdmin() {
				uni.switchTab({
					url: '/pages/admin/admin'
				})
			}
		}
	}
</script>

Now configure the tabbar in pages.json

 Here is an example in user to illustrate. The logic in admin is the same.

user.vue

<template>
	<view>
		user
		<van-tabbar :active="active" @change="onChange">
			<van-tabbar-item icon="home-o" @click="goSwitch('/pages/user/user')">user</van-tabbar-item>
			<van-tabbar-item icon="search" @click="goSwitch('/pages/user_1/user_1')">user_1</van-tabbar-item>
		</van-tabbar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0 //高亮的图标的标
			}
		},
		onShow() {
			this.active = 0  //为了防止tabbar图标高亮切换卡顿问题
			uni.hideTabBar() //隐藏掉原始的tabbar
		},
		methods: {
			onChange(e) {
				this.active = e.detail
			},
			goSwitch(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style>

</style>

user_1.vue

<template>
	<view>
		user1
		<van-tabbar :active="active" @change="onChange">
			<van-tabbar-item icon="home-o" @click="goSwitch('/pages/user/user')">user</van-tabbar-item>
			<van-tabbar-item icon="search" @click="goSwitch('/pages/user_1/user_1')">user_1</van-tabbar-item>
		</van-tabbar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0
			}
		},
		onShow() {
			this.active = 1
			uni.hideTabBar()
		},
		methods: {
			onChange(e) {
				this.active = e.detail
			},
			goSwitch(url) {
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style>

</style>

Then this function is realized