思路:
1.第一種是根據登錄時獲取的不同角色信息,來進行 跳轉到不同的頁面,在這些頁面中使用自定義tabbar
2.第二種思路是封裝一個自定義tabbar組件,然后在所有要展示tabbar的頁面中引入使用
1.根據手機號碼一鍵登錄,在回調中獲取用戶信息進行跳轉
/*** @param {object} e 獲取手機號碼組件回調參數* @description 家政人員一鍵登錄組件回調*/async getPhoneNumber(e) {if (e.detail.errMsg == "getPhoneNumber:ok") {this.phoneCode = e.detail.code;if (this.loginCode == "") {await this.getCode();}this.loginForm = {loginCode: this.loginCode,phoneCode: this.phoneCode,};this.$http.staffWxLogin(this.loginForm).then(res => {if (res.code == 200) {console.log(res, 'res')uni.setStorageSync("token", res.data.token);uni.setStorageSync("employeeStaffId", res.data.userId);uni.setStorageSync('userType', 1);/*** 家政端*/// uni.reLaunch({// url: '/pages/bottomPage/index'// })/*** 司機端*/uni.reLaunch({url: "/page-diver/diver/tabBar/tabBar"})}})}},
2.在tabbar頁面中完成自定義tabbar,并完成根據激活的tabbar展示不同頁面的邏輯
其實就是調用v-if來控制不同頁面的顯示
<template><view style="height: 100vh; overflow-y: hidden;display: flex;flex-direction: column;"><view style="overflow-y: hidden;flex-grow: 10;"><!-- 首頁 --><scroll-view style="height: 100%;" v-if="currentTab === 'index'" scroll-y><index-com></index-com></scroll-view><!-- 客戶 --><scroll-view style="height: 100%;" v-if="currentTab === 'customer'"><index-com></index-com></scroll-view><!-- 人員 --><view style="height: 100%;" v-if="currentTab === 'person'" ><index-com></index-com></view><!-- 合同 --><view style="height: 100%;" v-if="currentTab === 'contract'"><index-com></index-com></view><!-- 工具 --><view style="height: 100%;" v-if="currentTab === 'tool'" scroll-y><index-com></index-com></view></view><!-- tabBar --><u-tabbar :value="currentTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"activeColor="#FF7993" inactiveColor="#A7A7A7" style="flex: 0"><u-tabbar-item v-for="(item,index) in iconList" :text="item.label" :key="index" :icon="item.isActive?item.active:item.path" @click="barClick"></u-tabbar-item></u-tabbar> </view>
</template><script>import indexCom from '../index/index.vue'export default {components: {indexCom,},data() {return {currentTab: 'index',iconList: [{path:'/static/tabBar/diver-home.png',active:'/static/tabBar/diver-achome.png',name:'index',isActive:true,label:'首頁'},{path:'/static/tabBar/diver-car.png',active:'/static/tabBar/diver-accar.png',name:'tool',isActive:false,label:'我的車隊'},{path:'/static/tabBar/diver-my.png',active:'/static/tabBar/diver-acmy.png',name:'my',isActive:false,label:'我的'}]}},methods: {barClick(e,name){for(let i =0;i<this.iconList.length;i++){if(i === e){if(!this.iconList[i].isActive){this.iconList[i].isActive = truethis.currentTab =iconsole.log(this.currentTab,'currentTab')}}else{this.iconList[i].isActive = false}}}}}
</script><style></style>
第二張思路就不贅述了,直接用上面的tabbar封裝成組件引用即可,主要在pages.json中將tabbarlist設為空數組。