微信小程序实现根据不同的用户角色显示不同的tabbar并且可以完整的切换tabbar

直接上图上代码吧

// login/login.js
const app = getApp()
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},handleClick({currentTarget}){let userType = currentTarget.dataset.type// debuggerapp.globalData.userType =  currentTarget.dataset.typeconst targetPath = userType === 'a' ? '/pages/person/home/home' : '/pages/company/gift/gift';wx.switchTab({ url: targetPath }); // 关键:跳转到Tab页}
})
<!--login/login.wxml-->
<text>login/login.wxml</text>
<view><button data-type="a" bind:tap="handleClick">登陆个人</button></view>
<view><button data-type="b" bind:tap="handleClick">登陆企业</button></view>

1,这是我的目录解构

开启自定义tabbar开关custom:true,

然后list需要把所有tabar页面都注册进去

// app.json{"pages": ["login/login","pages/person/home/home","pages/person/vip/vip","pages/person/person/person","pages/company/gift/gift","pages/company/mine/mine","pages/company/order/order"],"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{ "pagePath": "pages/person/home/home", "text": "首页"},{ "pagePath": "pages/person/vip/vip", "text": "会员"},{ "pagePath": "pages/person/person/person", "text": "个人中心"},{ "pagePath": "pages/company/gift/gift", "text": "礼品"},{ "pagePath": "pages/company/order/order", "text": "订单"},{ "pagePath": "pages/company/mine/mine", "text": "我的"}]},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"usingComponents": {}
}

2.自定义tabbar文件夹  custom-tab-bar

// custom-tab-bar/index.js
Component({data: {tabList: [],     // 根据用户类型动态设置activeIndex: 0   // 当前选中Tab},methods: {switchTab(e) {// const path = e.currentTarget.dataset.path;// const index = e.currentTarget.dataset.index;// wx.switchTab({ url: path });// this.setData({ activeIndex: index });const { path, index } = e.currentTarget.dataset;console.log(path)wx.switchTab({url: path,success: () => {console.log('跳转成功');this.setData({ activeIndex: index });},fail: (err) => {console.error('跳转失败:', err);}});},// 根据用户类型更新Tab列表updateTabList(userType) {const tabs = {a: [{ pagePath: "/pages/person/home/home", text: "首页"},{ pagePath: "/pages/person/vip/vip", text: "会员"},{ pagePath: "/pages/person/person/person", text: "个人中心"}],b: [{ pagePath: "/pages/company/gift/gift", text: "礼品"},{ pagePath: "/pages/company/order/order", text: "订单"},{ pagePath: "/pages/company/mine/mine", text: "我的"}]};this.setData({ tabList: tabs[userType] });}},
});
//index.json{"component": true
}
<!-- custom-tab-bar/index.wxml -->
<!-- <view class="tab-bar"><block wx:for="{{tabList}}" wx:key="index"><view class="tab-item {{activeIndex === index ? 'active' : ''}}" bindtap="switchTab"data-path="{{item.pagePath}}"data-index="{{index}}"><image src="{{activeIndex === index ? item.selectedIconPath : item.iconPath}}"></image><text>{{item.text}}</text></view></block>
</view> -->
<!-- custom-tab-bar/index.wxml -->
<cover-view class="tab-bar"><block wx:for="{{tabList}}" wx:key="index"><cover-view class="tab-item {{activeIndex === index ? 'active' : ''}}"bindtap="switchTab"data-path="{{item.pagePath}}"data-index="{{index}}"><cover-image class="tab-icon" src="{{activeIndex === index ? item.selectedIconPath : item.iconPath}}" /><cover-view class="tab-text">{{item.text}}</cover-view></cover-view></block>
</cover-view>
/* custom-tab-bar/index.wxss */
.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 100rpx; /* 高度与原生TabBar一致 */background: #ffffff;display: flex;align-items: center;justify-content: space-around;box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); /* 顶部阴影 */z-index: 9999; /* 确保层级最高 */
}.tab-item {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;padding: 0 20rpx;
}.tab-icon {width: 48rpx;height: 48rpx;margin-bottom: 4rpx;
}.tab-text {font-size: 20rpx;color: #666666;
}/* 选中状态样式 */
.tab-item.active .tab-text {color: #007AFF; /* 主题色 */
}.tab-item.active .tab-icon {filter: brightness(0.8); /* 图标选中效果 */
}

3.自定义util

// util/changetab.js
const app = getApp()
module.exports = Behavior({methods: {updateTabBarIndex(index) {const userType = app.globalData.userType;const tabBar = this.getTabBar();if (tabBar) {tabBar.updateTabList(userType);tabBar.setData({ activeIndex: index })};}}
});

z最后在各个tabbar对于的页面的onshow中引入util方法

// pages/person/home/home.js
const changeTab = require('../../../util/changeTab')
Page({behaviors:[changeTab],/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面显示*/onShow() {this.updateTabBarIndex(0); },/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

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

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

相关文章

CTA重建:脑血管重建,CT三维重建,三维建模 技术,实现

CTA&#xff08;CT血管造影&#xff09;是一种基于CT扫描的医学成像技术&#xff0c;主要用于血管系统的三维重建和可视化。脑血管重建是CTA的重要应用之一&#xff0c;能够帮助医生诊断脑血管疾病&#xff08;如动脉瘤、狭窄、畸形等&#xff09;。以下是实现CTA脑血管重建、C…

告别XML模板的繁琐!Word文档导出,easy!

word模板导出 最近项目中有个功能&#xff0c;导出月报&#xff0c;发现同事使用了docx格式模板,感觉比之前转成xml的简单多了&#xff0c;这边记录下使用方法。 xml方式导出word,模板太复杂了 资料 poi-tl 一个基于Apache POI的Word模板引擎&#xff0c;也是一个免费开源的Jav…

Vue 过滤器深度解析与应用实践

文章目录 1. 过滤器概述1.1 核心概念1.2 过滤器生命周期 2. 过滤器基础2.1 过滤器定义2.2 过滤器使用 3. 过滤器高级用法3.1 链式调用3.2 参数传递3.3 动态过滤器 4. 过滤器应用场景4.1 文本格式化4.2 数字处理4.3 数据过滤 5. 性能优化与调试5.1 性能优化策略5.2 调试技巧 6. …

ST电机库电流采样 三电阻单ADC

一、概述 下图是三电阻采样的电路结构 其中流过三相系统的电流I1、I2、I3遵循以下关系: 因此,为了重建流过普通三相负载的电流,在我们可以用以上公式计算的情况下,只需要对三相中的两相进行采样即可。 STM32的ADC可以很灵活的配置成同步采集两路ADC数据,…

【测试篇】打破测试认知壁垒,从基础概念起步

前言 &#x1f31f;&#x1f31f;本期讲解关于测试的基本概念相关知识介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话…

SpringBoot MCP 入门使用

随着AI的火爆&#xff0c;最近发现MCP在未来确实大有可为&#xff0c;作为一名javaer怎么可以落后在历史洪流呢&#xff0c;根据官网和cursor也从零开始体验一下自定义mcp server。以后可以根据自己业务场景做出各种适合自身业务的工具。 至于什么是MCP 可以到https://modelcon…

@Autowired和@Resource的区别是?

前情回顾 正确使用Autowired Autowired 注解在构造器上的使用规则&#xff08;字段注入也挺好的&#xff09; 正确使用Resource 来源不同 Autowired的“爹”是Spring Resource的“爹”是Java&#xff08;JSR-250&#xff09; 这是一个规范&#xff0c;Spring对这个注解进行…

3.9/Q2,Charls最新文章解读!

文章题目&#xff1a;Association between remnant cholesterol and depression in middle-aged and older Chinese adults: a population-based cohort study DOI&#xff1a;10.3389/fendo.2025.1456370 中文标题&#xff1a;中国中老年人残留胆固醇与抑郁症的关系&#xff1…

无再暴露源站!群联AI云防护IP隐匿方案+防绕过实战

一、IP隐藏的核心原理 群联AI云防护通过三层架构实现源站IP深度隐藏&#xff1a; 流量入口层&#xff1a;用户访问域名解析至高防CNAME节点&#xff08;如ai-protect.example.com&#xff09;智能调度层&#xff1a;基于AI模型动态分配清洗节点&#xff0c;实时更新节点IP池回…

项目开发 1-确定选题,制作原型

一、AI问答 问&#xff1a; 作为计算机专家&#xff0c;密码学家&#xff0c;给研究生一年级学生设计20个实践项目&#xff0c;具体要求如下&#xff1a; 一. 总体要求 必须使用 Linux 系统调用&#xff0c;要求使用文件I/O,多进程或多线程&#xff0c;一定要用到 Socket 系统…

使用SetupTools 管理你的项目打包工作

Setuptools 是一个用于 Python 的包管理工具&#xff0c;主要用于构建、打包和分发 Python 软件包。它是 distutils 的增强版&#xff0c;提供了更多的功能和灵活性&#xff0c;是 Python 包管理的核心模块之一。 功能与特点 依赖管理&#xff1a;Setuptools 提供了强大的依赖…

人工智能与人的智能,改变一生的思维模型【8】逆向思维

逆向偏差思维模型&#xff1a;顶尖高手如何「反常识」破局 &#xff08;斯坦福决策科学中心认证的逆向思考框架&#xff09; 一、直击本质&#xff1a;什么是逆向偏差思维&#xff1f; 定义&#xff1a; 逆向偏差思维是一种主动对抗本能认知倾向的决策模式&#xff0c;通过系…

YOLO优化之扫描融合模块(SimVSS Block)

研究背景 在自动驾驶技术快速发展的背景下,目标检测作为其核心组成部分面临着严峻挑战。 驾驶场景中目标尺度和大小的巨大差异 ,以及 视觉特征不显著且易受噪声干扰 的问题,对辅助驾驶系统的安全性构成了潜在威胁。 传统的卷积神经网络(CNN)虽然在目标检测领域取得了显著…

(全)2024下半年真题 系统架构设计师 综合知识 答案解析01

系统架构设计师第二版教程VIP课程https://edu.csdn.net/course/detail/40283 操作系统 下列选项中不能作为预防死锁措施的是 。 A. 破坏“循环等待"条件 B. 破坏“不可抢占”条件 C. 破坏“互斥”条件 D. 破坏“请求和保持”条件 答案&#xff1a;C 解析&…

通义万相 2.1 + 蓝耘算力,AI 视频生成的梦幻组合

在这个科技日新月异的时代&#xff0c;人工智能不断刷新着我们对世界的认知。一次偶然的机会&#xff0c;我借助北京蓝耘科技股份有限公司提供的算力支持&#xff0c;踏上了使用通义万相 2.1 进行 AI 视频生成的奇妙之旅。 目录 1.1初遇蓝耘科技&#xff1a; 1.2通义万相 2.1…

链表·简单归并

cur->next la; //将 p指针所指向的链表节点的 next 指针&#xff08;也就是 p 节点的下一个节点的指针&#xff09;指向 l1 所指向的链表节点。简单来说&#xff0c;就是把 la 节点连接到 p 节点的后面&#xff0c;更新了链表的连接关系。 p la; //将p指针的值更新为 la …

kmp报错→Cannot find skiko-windows-x64.dll.sha256

1、前言 学习kmp&#xff08;Kotlin MultiPlatform简称&#xff09;过程中报了错误&#xff0c;这个报错在直接运行desktop的main方法才会出现&#xff0c;用gradle运行却不会报错&#xff0c;新建的kmp项目也不会出现&#xff0c;我学习的写了一些代码的项目才会出现。   运…

MySQL(事物下)

目录 一 多版本并发控制&#xff08; MVCC &#xff09;是一种用来解决 读-写冲突 的无锁并发控制 1. 前置知识 示例&#xff1a; 二 Read View 1. 当事物进行快照读(读历史数据)会MySQL会创建一个Read Vidw类对象&#xff0c;用来记录和当前一起并发的事物(活跃的事物)&a…

星型组网模块的两种交互方式优缺点解析

星型组网模块简介 星型组网模块工作在433MHz频段&#xff1b;星型组网模块集主机&#xff08;协调器&#xff09;、终端为一体&#xff0c;星型组网模块具有长距离、高速率两种传输模式&#xff0c;一个主机&#xff08;协调器&#xff09;支持多达200个节点与其通讯&#xff0…

IMX6ULL学习整理篇——UBoot的一些基础知识(1.编译流程)

前言 笔者整理了最近刷IMX6ULL的一些学习笔记&#xff0c;这里打算稍微整理一下东西发上来作为作为一个补充 正文 大部分而言&#xff0c;当我们拿到源码的时候&#xff0c;一般都是——先使用make来生成一份针对我们目标开发板的配置。举个例子&#xff0c;正点原子针对他们…