最近在一個(gè)
uni-app項(xiàng)目中遇到一個(gè)需求,在登錄頁面成功登錄以后需要判斷身份,不同的身份的進(jìn)入不同的tabBar頁面,但是在uni-app項(xiàng)目中pages.json中的tabBar的list數(shù)組只有一個(gè)，且不能寫成動態(tài)的,那如何實(shí)現(xiàn)這個(gè)需求呢?答案是需要我們自定義tabBar。
1智绸、我們確定在 pages.json文件中的pages數(shù)組中的第一個(gè)頁面就是進(jìn)入程序時(shí)展示的第一個(gè)頁面,那這個(gè)頁面肯定就是我們的登錄頁面了卢厂。
2脾猛、將pages.json中的tabBar的list設(shè)置為空數(shù)組,即不再使用默認(rèn)系統(tǒng)自帶的tabBar組件嗓蘑。
3配椭、創(chuàng)建tabBar.vue組件,組件內(nèi)的代碼內(nèi)容如下沐飘。
<template>
<view class="tab-bar">
<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
<view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
props: {
selectedIndex: { // 當(dāng)前選中的tab index
default: 0
},
},
data() {
return {
color: "#666666",
selectedColor: "#00BAB2",
list: [],
currentIndex:0,
}
},
created() {
this.currentIndex = this.selectedIndex;
var _this = this
if (uni.getStorageSync('identify') == 'nurse') {
//護(hù)士
_this.list = [{
"pagePath": "/pages/nursehome/nursehome",
"iconPath": "/static/tab/home_n.png",
"selectedIconPath": "/static/tab/home_s.png",
"text": "首頁"
},
{
"pagePath": "/pages/personalcenter/personalcenter",
"iconPath": "/static/tab/personal_n.png",
"selectedIconPath": "/static/tab/personal_s.png",
"text": "我的"
}
]
} else {
//醫(yī)管
_this.list = [{
"pagePath": "/pages/home/home",
"iconPath": "/static/tab/home_n.png",
"selectedIconPath": "/static/tab/home_s.png",
"text": "首頁"
},
{
"pagePath": "/pages/nurse/nurselist",
"iconPath": "/static/tab/nurse_n.png",
"selectedIconPath": "/static/tab/nurse_s.png",
"text": "護(hù)士"
},
{
"pagePath": "/pages/personalcenter/personalcenter",
"iconPath": "/static/tab/personal_n.png",
"selectedIconPath": "/static/tab/personal_s.png",
"text": "我的"
}
]
}
},
methods: {
switchTab(item, index) {
this.currentIndex = index;
let url = item.pagePath;
uni.redirectTo({url:url})
}
}
}
</script>
<style lang="scss">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: env(safe-area-inset-bottom); // 適配iphoneX的底部
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.tab_img {
width: 37rpx;
height: 41rpx;
}
.tab_text {
font-size: 20rpx;
margin-top: 9rpx;
}
}
}
</style>
這里需要注意：里面的圖片路徑要寫成絕對路徑游桩，不然打包的時(shí)候如果是在該項(xiàng)目下的頁面會出現(xiàn)層級問題，顯示不出來圖片
4耐朴、在main.js文件中將自定義的tabBar定義為全局組件借卧。
import tabBar from "components/tabBar/tabBar.vue"
Vue.component('tabBar',tabBar)
5、在每一個(gè)原本將要設(shè)置為tabBar的子頁面添加我們自定義的tabBar組件筛峭。
//首頁
<tabBar selectedIndex = 0></tabBar>
//護(hù)士列表
<tabBar selectedIndex = 1></tabBar>
6铐刘、登錄頁面中成功登錄以后的頁面的切換邏輯。
if(this.data.identify == '護(hù)士'){
uni.setStorageSync('identify','nurse')
}else{
uni.setStorageSync('identify','manager')
}
uni.reLaunch({
url:'../home/home'
})
