最近在一個(gè)uni-app項(xiàng)目中遇到一個(gè)需求,在登錄頁面成功登錄以后需要判斷身份,不同的身份的進(jìn)入不同的tabBar頁面,但是在uni-app項(xiàng)目中pages.json中的tabBar的list數(shù)組只有一個(gè)，且不能寫成動(dòng)態(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)容如下。
4、在main.js文件中將自定義的tabBar定義為全局組件。
5、在每一個(gè)原本將要設(shè)置為tabBar的子頁面添加我們自定義的tabBar組件。
6、創(chuàng)建一個(gè)新的頁面來進(jìn)行對不同系統(tǒng)進(jìn)行操作
7.設(shè)置完后需要在每個(gè)tabbar頁面中配置css??
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('system') == 'diagnosis') {
//故障診斷系統(tǒng)
_this.list = [
{
pagePath: '/pages/terbineList/index',
iconPath: '/static/images/tabbar/terbine.png',
selectedIconPath: '/static/images/tabbar/terbine_select.png',
// "text": "風(fēng)機(jī)列表"
},
{
pagePath: '/pages/warningList/index',
iconPath: '/static/images/tabbar/warning.png',
selectedIconPath: '/static/images/tabbar/warning_select.png',
// "text": "預(yù)警列表"
},
{
pagePath: '/pages/mine/index',
iconPath: '/static/images/tabbar/mine.png',
selectedIconPath: '/static/images/tabbar/mine_select.png',
// "text": "我的"
},
];
} else {
//能源利用與分布系統(tǒng)
_this.list = [
{},
{},
{},
{
pagePath: '/pages/mine/index',
iconPath: '/static/images/tabbar/mine.png',
selectedIconPath: '/static/images/tabbar/mine_select.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: #05112f;
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)目下的頁面會(huì)出現(xiàn)層級(jí)問題，顯示不出來圖片
4、在main.js文件中將自定義的tabBar定義為全局組件。
import tabBar from "components/tabBar/tabBar.vue"
Vue.component('tabBar',tabBar)5、在每一個(gè)原本將要設(shè)置為tabBar的子頁面添加我們自定義的tabBar組件。
//就在不同的tabbar頁面中添加這一行 index 根據(jù)在tabbar中List集合中進(jìn)行設(shè)置
//第一個(gè)頁面
<tabBar selectedIndex = 0></tabBar>
//第二個(gè)頁面
<tabBar selectedIndex = 1></tabBar>6、創(chuàng)建一個(gè)新的頁面來進(jìn)行對不同系統(tǒng)進(jìn)行操作
通過uni.setStorageSync('system', 'diagnosis'); 來判斷進(jìn)入的系統(tǒng)
<template>
<view>
<uni-section title="請選擇您要進(jìn)入的系統(tǒng)" titleColor="#ffffff" type="line" class="titleStyle" />
<view class="button-group">
<button type="primary" plain="true" @click="handleButtonClick(1)">{{ energySystem }}</button>
<button type="primary" plain="true" @click="handleButtonClick(2)">{{ diagnosisSystem }}</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
energySystem: '故障診斷系統(tǒng)',
diagnosisSystem: '能源利用與分布系統(tǒng)',
};
},
methods: {
handleButtonClick(systemId) {
if (systemId === 1) {
// 進(jìn)入故障診斷系統(tǒng)
uni.setStorageSync('system', 'diagnosis');
uni.navigateTo({
url: '/pages/terbineList/index',
});
} else if (systemId === 2) {
// 進(jìn)入能源利用與分布系統(tǒng)
uni.setStorageSync('system', 'energy');
uni.navigateTo({
url: '/pages/mine/index',
});
}
},
},
};
</script>
<style>
.titleStyle {
font-size: 20rpx;
}
.button-group {
flex-direction: column;
align-items: center;
width: 60%;
height: auto;
margin-left: 150rpx;
}
button {
margin: 200rpx auto;
}
</style>
7.設(shè)置完后需要在每個(gè)tabbar頁面中配置css??
一定要用這樣的格式文章來源：http://www.zghlxwxcb.cn/news/detail-850062.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-850062.html
.tarbarStyle { //tarbarStyle
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}
.dataInfo { //tabbar上面的信息展示
margin-bottom: 50px; /* 根據(jù) tabBar 的高度進(jìn)行調(diào)整 */
}到了這里，關(guān)于uni-app 中兩個(gè)系統(tǒng)各自顯示不同的tabBar的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
