当前位置：首页 > news >正文

uniapp如何根据不同角色自定义不同的tabbar

news 来源：原创 2024/9/23 5:24:24

思路：

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设为空数组。