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

直接上图上代码吧

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

login/login.wxml登陆个人登陆企业

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.jsComponent({ 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}

<!--  <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}}\"> {{item.text}}   --> <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}}\" /> {{item.text}}  

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