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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/38249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringMVC的基本使用

SpringMVC简介 SpringMVC是Spring提供的一套建立在Servlet基础上&#xff0c;基于MVC模式的web解决方案 SpringMVC核心组件 DispatcherServlet&#xff1a;前置控制器&#xff0c;来自客户端的所有请求都经由DispatcherServlet进行处理和分发Handler&#xff1a;处理器&…

三个方法教大家学会RAR文件转换为ZIP格式

在日常工作当中&#xff0c;RAR和ZIP是两种常见的压缩文件格式。有时候&#xff0c;大家可能会遇到将RAR文件转换为ZIP格式的情况&#xff0c;这通常是为了方便在特定情况下打开或使用文件。下面给大家分享几个RAR文件转换为ZIP格式的方法&#xff0c;下面随小编一起来看看吧~ …

在mfc程序中,如何用c++找到exe文件所在的路径

在 MFC&#xff08;Microsoft Foundation Class&#xff09;程序中&#xff0c;你可以使用 GetModuleFileName 函数来获取当前运行的可执行文件&#xff08;.exe&#xff09;的路径。 以下是一个示例代码&#xff1a; #include <afxwin.h> #include <iostream>in…

KVM性能优化之CPU优化

1、查看kvm虚拟机vCPU的QEMU线程 ps -eLo ruser,pid,ppid,lwp,psr,args |awk /^qemu/{print $1,$2,$3,$4,$5,$6,$8} 注:vcpu是不同的线程&#xff0c;而不同的线程是跑在不同的cpu上&#xff0c;一般情况&#xff0c;虚拟机在运行时自身会点用3个cpus&#xff0c;为保证生产环…

通过MATLAB控制TI毫米波雷达的工作状态

前言 前一章博主介绍了MATLAB上位机软件“设计视图”的制作流程,这一章节博主将介绍如何基于这些组件结合MATLAB代码来发送CFG指令控制毫米波雷达的工作状态 串口配置 首先,在我们选择的端口号输入框和端口波特率设置框内是可以手动填入数值(字符)的,也可以在点击运行后…

汇凯金业:投资交易如何才能不亏损

投资交易中永不亏损是一个理想化的目标&#xff0c;现实中无法完全避免亏损。然而&#xff0c;通过科学的方法、合理的策略和严格的风险管理&#xff0c;投资者可以大幅减少亏损&#xff0c;并提高长期盈利的概率。以下是一些关键策略和方法&#xff0c;帮助投资者在交易中尽量…

【CSRF】

CSRF 原理&#xff1a;诱导用户在访问第三方site时&#xff0c;访问攻击者构造的site,攻击者site会对原site进行恶意操作。 burp模拟攻击&#xff1a; 对一个博客系统点击发布文章时&#xff0c;Burp Suite抓包&#xff0c;右键CSRF PoC功能 -> Engagament tools -> Gen…

洛谷 P3954 [NOIP2017 普及组] 成绩

本文由Jzwalliser原创&#xff0c;发布在CSDN平台上&#xff0c;遵循CC 4.0 BY-SA协议。 因此&#xff0c;若需转载/引用本文&#xff0c;请注明作者并附原文链接&#xff0c;且禁止删除/修改本段文字。 违者必究&#xff0c;谢谢配合。 个人主页&#xff1a;blog.csdn.net/jzw…

太阳能辐射系统加速材料老化的关键设备光照老化实验箱

光照老化实验箱概述 光照老化实验箱是一种模拟太阳光照射对材料影响的实验设备&#xff0c;主要用于加速材料的自然老化过程&#xff0c;以此来评估材料在实际使用环境中的耐久性和稳定性。该设备广泛应用于汽车、航空、建筑、塑料制品等行业&#xff0c;尤其在汽车领域&#…

多商户b2b2c商城系统怎么运营

B2B2C多用户商城系统支持多种运营模式&#xff0c;以满足不同类型和发展阶段的企业需求。以下是五大主要的运营模式&#xff1a; **1. 自营模式&#xff1a;**平台企业通过建立自营线上商城&#xff0c;整合自身多渠道业务。通过会员、商品、订单、财务和仓储等多用户商城管理系…

OK527N-C开发板-简单的性能测试

OK527N-C CoreMark 获取CoreMark源码 首先使用Git克隆仓库&#xff1a; git clone https://github.com/eembc/coremark.git cd coremark修改Makefile 首先复制文件夹 cp -rf posix ok527之后修改ok527文件夹下的core_portme.mak文件&#xff0c;将CC修改如下 CC aarch6…

CPU占用率飙升至100%:是攻击还是正常现象?

在运维和开发的日常工作中&#xff0c;CPU占用率突然飙升至100%往往是一个令人紧张的信号。这可能意味着服务器正在遭受攻击&#xff0c;但也可能是由于某些正常的、但资源密集型的任务或进程造成的。本文将探讨如何识别和应对服务器的异常CPU占用情况&#xff0c;并通过Python…

魔行观察-探鱼·鲜青椒爽麻烤鱼-开关店监测-时间段:2013年1月 至 2024年6月

今日监测对象&#xff1a;探鱼鲜青椒爽麻烤鱼&#xff0c;监测时间段&#xff1a;2011年1月 至 2024年6月 本文用到数据源免费获取地址 魔行观察http://www.wmomo.com/ 品牌介绍&#xff1a; 探鱼建立了产、供、销一体全链条式供应链体系&#xff0c;并在低纬珠江口特设潮汐…

大公司图纸管理的未来趋势

随着科技的不断发展&#xff0c;大公司图纸管理正朝着更加智能化、自动化和协同化的方向发展。以下是大公司图纸管理的未来趋势预测。 1. 智能化管理 利用人工智能和机器学习技术&#xff0c;实现图纸的自动分类、标注和检索。通过智能分析算法&#xff0c;预测图纸的使用趋势…

NSSCTF-Web题目19(数据库注入、文件上传、php非法传参)

目录 [LitCTF 2023]这是什么&#xff1f;SQL &#xff01;注一下 &#xff01; 1、题目 2、知识点 3、思路 [SWPUCTF 2023 秋季新生赛]Pingpingping 4、题目 5、知识点 6、思路 [LitCTF 2023]这是什么&#xff1f;SQL &#xff01;注一下 &#xff01; 1、题目 2、知识…

基于Vue的MOBA类游戏攻略分享平台

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术、SpringBoot框架、B/S模式、Vue.js 工具&#xff1a;MyEclipse、MySQL 系统展示 首页 用…

在 Windows 上,使用 icacls 命令让apache 用户有权访问

调试免费云服务器&#xff0c;三丰云&#xff0c;用户权限过程。 在 Windows 上&#xff0c;icacls 命令是一个非常强大的工具&#xff0c;用于修改文件和目录的权限。然而&#xff0c;需要注意的是&#xff0c;Windows 默认的 Web 服务器&#xff08;如 IIS&#xff09;通常运…

lstrip()方法——截掉字符串左边的空格或指定的字符

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 lstrip()方法用于截掉字符串左边的空格或指定的字符。lstrip()方法的语法格式如下&#xff1a; str.lstrip([chars]) 参数说明&#xff…

【算法】Merge Sort 合并排序

Merge Sort概述 分而治之算法 递归地将问题分解为多个子问题&#xff0c;直到它们变得简单易解 将解决方案组合起来&#xff0c;解决原有问题 O&#xff08;n*log&#xff08;n&#xff09;&#xff09;运行时间 基于比较的算法的最佳运行时间 一般原则 合并排序: 1. 将数…

elasticsearch镜像化安装部署

1、镜像安装 docker network create --driver bridge --subnet192.128.0.0/10 --gateway192.128.1.1 mynetwork docker run -d --netmynetwork --ip192.128.10.1 -p 1000:22 --name redhat-es01 -it c70d72aaebb4 /bin/bash #拉取镜像 docker pull elasticsearch:7.7.0 #启动…