微信小程序设置动态tabBar，根据用户权限变化 |
您所在的位置：网站首页 › custom-tab-bar › 微信小程序设置动态tabBar，根据用户权限变化 |
微信小程序设置动态tabBar，根据用户权限变化
|
1、微信小程序配置自定义tab-bar 🪄 这里可以参考 官方文档，关键就是配置app.json和新建custom-tab-bar文件夹 2、以下是关键代码 💡app.json tabBar里放了四个路径，把要用到的路径都放在里面，最多5个，最少两个 { "pages": [ "index/index", "example/example", "person/person" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black" }, "tabBar": { "custom": true, "color": "#000", "selectedColor": "#4d94f0", "backgroundColor": "#fff", "borderStyle": "black", "list": [ { "pagePath": "index/index", "iconPath": "image/icon_component.png", "selectedIconPath": "image/icon_component_HL.png", "text": "首页" }, { "pagePath": "example/example", "iconPath": "image/example_unselect.png", "selectedIconPath": "image/example_selected.png", "text": "测试" }, { "pagePath": "person/person", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "我的" } ] }, "style": "v2", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }✨utils/eventBus.js 关键-eventBus，跨组件跨页面间通讯 const eventBus = { // 存储所有事件和对应的订阅者 eventList: new Map(), // 订阅事件 on(event, callback) { if (!this.eventList.has(event)) { this.eventList.set(event, new Set()) } this.eventList.get(event).add(callback) }, // 取消订阅事件 off(event, callback) { if (this.eventList.has(event)) { const callbacks = this.eventList.get(event) callbacks.delete(callback) if (callbacks.size === 0) { this.eventList.delete(event) } } }, // 发布事件 emit(event, ...args) { if (this.eventList.has(event)) { const callbacks = this.eventList.get(event) callbacks.forEach((callback) => { callback.call(null, ...args) }) } } } module.exports = eventBus🎀app.js 切换权限的函数我写在了这里 getApp().eventBus.emit()，发布事件，将一个事件发送给所有订阅了这个事件的回调函数 const eventBus = require('./utils/eventBus') App({ eventBus: eventBus, changeUserRight() { const i = wx.getStorageSync('rightId') || 0 const id = i === 0 ? 1 : 0 wx.setStorageSync('rightId', id) getApp().eventBus.emit('rightChange', id) }, })🎉custom-tab-bar/index.js 自定义tabBar 1、tabBar 只展示list里面的路径 2、按权限分为 list1 和 list2 ，如果等级多的话可以有更多个，list里的路径必须是app.json里存在的 3、把用户权限rightId存在缓存中，根据rightId来判断展示什么tabBar 4、switchTab切换路由下标 5、 getApp().eventBus.on()是订阅事件，每次触发事件的时候，订阅了这个事件的回调函数将会被调用 // custom-tab-bar/index.js Component({ data: { rightId:wx.getStorageSync('rightId') || 0, list: [], list1: [{ "pagePath": "/index/index", "iconPath": "/image/icon_component.png", "selectedIconPath": "/image/icon_component_HL.png", "text": "首页" }, { "pagePath": "/person/person", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png", "text": "我的" } ], list2: [{ "pagePath": "/index/index", "iconPath": "/image/icon_component.png", "selectedIconPath": "/image/icon_component_HL.png", "text": "首页" }, { "pagePath": "/example/example", "iconPath": "/image/example_unselect.png", "selectedIconPath": "/image/example_selected.png", "text": "测试" }, { "pagePath": "/person/person", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png", "text": "我的" } ] }, attached() { this.changeList() getApp().eventBus.on('rightChange', data => { if (data !== this.data.rightId) { this.setData({ rightId: data }) this.changeList() } }) }, detached() { app.eventBus.off('rightChange') }, methods: { changeList() { this.setData({ rightId: wx.getStorageSync('rightId') || 0 }) if (this.data.rightId === 1) { this.setData({ list: this.data.list2 }) } else { this.setData({ list: this.data.list1 }) } }, switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({ url }) } } })👉每个tabBar页面的onShow()中需加上， selected表示它的顺序，这个不能写错，不然tabBar会出现高亮混乱的问题 if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) }🔔person.js 是列表的最后一个，列表内容变化，它的select也会动态变化，所以要加一个判断 let num = this.data.rightId === 1 ? 2 : 1 if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: num }) }3、📺演示效果
4、完整版 在这里提供一个🌴代码片段 希望这篇博文可以为大家提供一点帮助，同时个人感觉最终效果不是很完美，欢迎大家在评论区留言交流，共同进步 |
【本文地址】