一套小程序可能會有多個用戶角色，比如在線課堂類小程序，會有老師和學(xué)生，但是兩者能看到的內(nèi)容應(yīng)該是不一樣的。

實現(xiàn)原理

舍棄uniapp原生的tabbar，使用uView插件下的u-tabbar導(dǎo)航插件來實現(xiàn)。

uView

uView的官網(wǎng)如下，里面有詳細(xì)的教程，而且在uniapp插件市場也能找到，使用起來也是非常的方便。

uView 2.0 - 全面兼容nvue的uni-app生態(tài)框架

過程

1.首先在文件目錄下的components文件下創(chuàng)建一個自定義組件UserTab

?2.在UserTab文件里面，根據(jù)uView的教程，搭建好自己需要的導(dǎo)航 模塊

	<view>
		<!-- 學(xué)生端 -->
		<u-tabbar v-if="showWho=='student'" :value="student" @change="studentChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="#31aef1">
			<u-tabbar-item v-for="i in studentList" :key='i.id' :text="i.name" :name="i.name">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image>
			</u-tabbar-item>

		</u-tabbar>
		<!-- 教師端 -->
		<u-tabbar v-if="showWho=='teacher'" :value="teacher" @change="teacherChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="#31aef1">
			<u-tabbar-item v-for="i in teacherList" :key='i.id' :text="i.name" :name="i.name">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>

? 3.為了方便循環(huán)和切換，要在JS里面配置好兩端的名字和圖片。并且要用showWho或其他變量來控制隱藏和顯示哪個。

	teacherList: [{
						id: 1,
						name: '課堂',
						active: '../../static/classroom-active.png',
						inactive: '../../static/classroom.png'
					},
					{
						id: 2,
						name: '興趣小組',
						active: '../../static/interestGroup-actiev.png',
						inactive: '../../static/interestGroup.png'
					},
					{
						id: 3,
						name: '我的',
						active: '../../static/mine-active.png',
						inactive: '../../static/mine.png'
					}
				]

4.來到要做成tabbar的各個頁面里，引入UserTab這個自定義組件，并且傳值過去（直接傳頁面的名稱就好）

<UserTab tabNumber='課堂'></UserTab>

5.在登錄的時候，就在本地存一個值，表明是老師還是學(xué)生。在UserTab的mounted生命周期里做一個簡單的判斷并且把tabbar傳過來的值賦值給事先準(zhǔn)備好的變

		mounted() {
			if (uni.getStorageSync('status') == 'teacher') {
				this.showWho = 'teacher'
			}
			if (uni.getStorageSync('status') == 'student') {
				this.showWho = 'student'
			}
			this.student = this.tabNumber
			this.teacher = this.tabNumber
		},

6.最后，配置好tabbar切換的方法函數(shù)?

	teacherChange(e) {
				this.teacher = e
				if (e == '課堂') {
					uni.reLaunch({
						url: "/pages/index/CourseTeacherIndex"
					})
					uni.hideHomeButton() //為了防止跳轉(zhuǎn)頁面后，小程序右上角會出現(xiàn)一個回到主頁的小房子
				} else if (e == "興趣小組") {
					uni.reLaunch({
						url: "/pages/interestGroup/interestGroup"
					})
					uni.hideHomeButton()
				} else if (e == "我的") {
					uni.reLaunch({
						url: "/pages/mine/mine"
					})
					uni.hideHomeButton()
				}
			},

總結(jié)：主要還是要摸索一下uView的tabbar的切換邏輯?。uniapp原生的tabbar必須要注釋了。退出賬號的時候，得把本地存的信息要刪除掉。這是一個比較笨的方法，如果大家有其他好的方法的話，歡迎交流學(xué)習(xí)噢！

?文章來源地址http://www.zghlxwxcb.cn/news/detail-599613.html

?

?

到了這里，關(guān)于uniapp微信小程序?qū)崿F(xiàn)不同賬號權(quán)限顯示不同tabbar的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！