微信小程序根据不同的权限展示不同的自定义tabbar
项目场景：
小程序中我们可能需要根据不同的权限展示不同的tabbar，比如你是会员的话，那么你的底部就展示一个VIP的tabbar，如果是普通用户的话就把这个VIP的tabbar隐藏掉。
解决方案：
首先我们先实现一个自定义的tabbar：
- 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整
- 创建custom-tab-bar，在根目录创建，如图(我用的是vant的组件，vant样式的使用就不用去写样式了，也可以去那官方文档中的)： 3.在app.json中把你所有项都加上（最多只能加5个，多了有就不行了），因为我们要通过getCurrentPages去获取当前的路径 4.在custom-tab-bar文件中.定义两套不同的tabar列表，在data中写了三个vipList、noVipList和list，默认展示的是list，如果app.globalData.userRank == 0 的时候是noVipList，如果app.globalData.userRank == 1 的时候是vipList，注意的是：list个和noVipList是一样的，那我们在下面判断进行setData的时候不能使用this.setData({list:this.data.list})，这样是不会改变的，你必须重写一个noVipList
// custom-tab-bar中的js
const app = getApp();
Component({
data: {
active:0,
list: [{
url:/pages/index/index,
text: "首页",
name:0,
icon:home-o
}, {
url:/pages/logs/logs,
text: "日志",
name:1,
icon:search
}],
vipList: [{
url:/pages/index/index,
text: "首页",
name:0,
icon:home-o
}, {
url:/pages/logs/logs,
text: "日志",
name:1,
icon:search
},{
url:/pages/vip/vip,
text: "VIP",
name:2,
icon:friends-o
}],
noVipList: [{
url:/pages/index/index,
text: "首页",
name:0,
icon:home-o
}, {
url:/pages/logs/logs,
text: "日志",
name:1,
icon:search
}]
},
attached() {
},
methods: {
init() {
const page = getCurrentPages().pop();
this.setData({
active: this.data.list.findIndex(item => item.url === `/${
page.route}`)
});
},
// 这是用了切换不同的权限的，做个判断切换不同的权限
checkPermission() {
if (app.globalData.userRank == 0) {
console.log(app.globalData.userRank)
this.setData({
list: this.data.noVipList,
})
}
if (app.globalData.userRank == 1) {
console.log(app.globalData.userRank)
this.setData({
list: this.data.vipList,
})
}
},
onChange(event) {
console.log(event)
this.setData({
active: event.detail });
wx.switchTab({
url: this.data.list[event.detail].url
});
},
}
})
5.在每个页面的文件夹中去调用init， this.getTabBar().init() 每个页面都要调用，切换权限就是下面的那个onChange了
// 页面中的js
const app = getApp();
Page({
data: {
radio: 109,
chepaihao:,
checked:false
},
onClick(event) {
const {
name } = event.currentTarget.dataset;
console.log(name)
this.setData({
chepaihao: name,
});
},
onChange({
detail }) {
let _this = this
if(detail) {
app.globalData.userRank = 1
console.log( app.globalData.userRank)
_this.getTabBar().checkPermission()
}else {
app.globalData.userRank = 0
_this.getTabBar().checkPermission()
}
this.setData({
checked: detail });
},
onShow() {
console.log( this.getTabBar())
this.getTabBar().init()
}
});
总结：
- 先设置自定义导航
- 自定义几套你需要的List
- 在全局定义一个标识来判断不同的权限展示
- 在每个页面调用init方法，tabbar选择当前页面的active
- 写个按钮切换权限，去切换全局的标识来切换不同的权限