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

news/2025/3/16 21:18:33/

直接上图上代码吧

// 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.ppmy.cn/news/1579656.html

相关文章

外呼系统破局电话管控:AI电销机器人合规运营实战指南

随着运营商对电话卡管控日趋严格&#xff0c;某金融科技公司曾因单日外呼超限导致80%号码被封——这一案例暴露出AI电销机器人在效率与合规间的矛盾。但数据显示&#xff0c;采用合规策略的企业外呼接通率仍能保持38%以上&#xff0c;关键在于建立适配监管环境的智能外呼体系。…

基于SSM + JSP 的水果蔬菜商城

基于ssm的水果蔬菜商城系统前台和后台&#xff08;源码安装视频数据库环境&#xff09;计算机项目程序设计管理系统java小程序网站商城 一.相关技术 Java、Spring、Springboot、MVC、Mybatis、MySQL、SSM框架、Web、HTML、maven、JavaScript、css、vue 二.部署配置 1.IntelliJ …

有效封装一个 WebSocket 供全局使用

前言 在现代 Web 应用中&#xff0c;实时通信已经成为越来越重要的一部分。而 WebSocket 技术的出现&#xff0c;使得实时通信变得更加高效和便捷。 WebSocket 协议是一种基于 TCP 协议的双向通信协议&#xff0c;它能够在客户端和服务器之间建立起持久性的连接&#xff0c;从…

【vue3学习笔记】(第144-146节)reactive函数;回顾vue2响应式原理;vue3响应式原理_proxy

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 本篇内容对应课程第144-143节 课程 P144节 《reactive函数》笔记 验证 reactive 只能处理对象类型数据&#xff0c;不能处理基本类型数据&#xff1a;当使用reactive处理一个基本类型数据时&#xff0c;控制台直接报出了警告&a…

国家网络安全事件应急预案

目 录 1 总则 1.1 编制目的 1.2 编制依据 1.3 适用范围 1.4 事件分级 1.5 工作原则 2 组织机构与职责 2.1 领导机构与职责 2.2 办事机构与职责 2.3 各部门职责 2.4 各省&#xff08;区、市&#xff09;职责 3 监测与预警 3.1 预警分级 3.2 预警监测 3.3 预警研判…

附下载 | 2024 OWASP Top 10 基础设施安全风险.pdf

《2024 OWASP Top 10 基础设施安全风险》报告&#xff0c;由OWASP&#xff08;开放网络应用安全项目&#xff09;发布&#xff0c;旨在提升企业和组织对基础设施安全风险、威胁与漏洞的意识&#xff0c;并提供高质量的信息和最佳实践建议。报告列出了2024年最重要的10大基础设施…

Cesium零基础速成教程:一小时入门Cesium

一小时速成Cesium&#xff0c;掌握以下7个功能&#xff1a; 地图、图层、3D瓦片加载 Cesium空间数据Entity Cesium动态数据 地图事件(点击、移动) 相机 三维模型 粒子效果 Cesium教程配套笔记 部分内容 1、Cesium介绍 Cesium是使⽤JavaScript开发的基于WebGL的&#x…

【反无人机目标检测数据集】空对空视觉检测微型无人机:深度学习的实验评估

Air-to-Air Visual Detection of Micro-UAVs&#xff1a; An Experimental Evaluation of Deep Learning 空对空视觉检测微型无人机&#xff1a;深度学习的实验评估 0.论文摘要 摘要—本文研究了利用单目摄像头进行空中对微型无人机&#xff08;UAV&#xff09;视觉检测的问题…