| 小程序根据用户不同的身份动态切换底部导航（tabBar） | 您所在的位置：网站首页 › 小程序用户信息出现两个是什么原因造成的 › 小程序根据用户不同的身份动态切换底部导航（tabBar） |
小程序根据用户不同的身份动态切换底部导航（tabBar）
|
有时候，小程序的业务场景需要根据不同用户身份，展示不同的内容。这时候我们就可以采用自定义的形式，根据用户的身份来动态的展示底部tabBar，注意：底部tabBar最多只能显示5个，自定组件中的tabBar必须跟app.json中的一样。 自定义实例可参考官方例子自定义tabBar 自定义组件的生命周期 实现的效果 在app.js中创建一个全局的list存放底部导航 globalData: { list: [], // tabBar }把用户身份对应的底部导航抽离出来，放在公共的文件中 utils/tabBarUrl.js 通过export暴露出去 // 普通用户 export const averageUser = [ { "pagePath": "/pages/index/index", "text": "首页", "iconPath": "/images/home.png", "selectedIconPath": "/images/home-color.png" }, { "pagePath": "/pages/user/user", "text": "个人中心", "iconPath": "/images/user.png", "selectedIconPath": "/images/user-color.png" } ] // 经销商 export const dealers = [ { "pagePath": "/pages/shopping/shopping", "text": "商城", "iconPath": "/images/shopping.png", "selectedIconPath": "/images/shopping-color.png" }, { "pagePath": "/pages/members/members", "text": "会员中心", "iconPath": "/images/member.png", "selectedIconPath": "/images/member-color.png" } ]登录成功后，把对应的list列表赋值到app.js中的list，然后跳转到对应的tabBar页面 // 引入对应的公共文件 import { averageUser } from '../../utils/tabBarUrl' const app = getApp() // 登录 login () { app.globalData.list = averageUser wx.switchTab({ url: '/pages/index/index', }) },在对应的tabBar页面中加入选中效果, 必须是onShow钩子函数中调用，不然会出现选中效果不准的情况 /** * 生命周期函数--监听页面显示 */ onShow () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1 //选中效果 当前tabBar页面在list中对应的下标， }) } },在自定义tabBar组件中，从app.js中把赋值的tabBar列表赋值到组件的list中 注意： 原生自定义底部文件必须在根目录下，而且文件名必须是custom-tab-bar data: { selected: 0, color: "#b5b5b5", selectedColor: "#fa8582", list:[] }, lifetimes: { // 在组件实例进入页面节点树时赋值 attached () { this.setData({ list: app.globalData.list }) }, },在切换身份角色时，进行对应的赋值，同时，在对应的身份tabBar首页今天tabBar重新赋值，不然tabBar不会更新，这样就可以完美的实现根据不同的身份切换展示不同的底部导航栏 // 引入对应的公共文件 import { averageUser, dealers } from '../../utils/tabBarUrl' const app = getApp() // 普通用户 ChangeAverage () { app.globalData.list = averageUser wx.switchTab({ url: '/pages/index/index', }) }, // 商户 changeShopping () { app.globalData.list = dealers wx.switchTab({ url: '/pages/shopping/shopping', }) }, // 在对应的tabBar页面重新赋值tabBar中的list /** * 生命周期函数--监听页面显示 */ onShow () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0, list: app.globalData.list }) } }最后一点，基础库版本不宜过低，最好使用高版本 |
创建四个文件，来模拟不同身份的用户，进行动态切换底部导航 app.json
【本文地址】
公司简介
联系我们