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

思路:

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 = true
							 this.currentTab =i
							 console.log(this.currentTab,'currentTab')
						 }
					}else{
							 this.iconList[i].isActive = false
						 }
				}
			}
		}
	}
</script>

<style>

</style>

第二张思路就不赘述了,直接用上面的tabbar封装成组件引用即可,主要在pages.json中将tabbarlist设为空数组。

相关推荐
brief of gali6 分钟前
记录一个奇怪的前端布局现象
前端
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome