⼩程序动态设置tab-bar ⼩程序动态设置tab-bar（⾃定义）
配置⾃定义tab-bar的⽅法这⾥省略，可以
动态设置tab-bar
需求：根据权限判断底部tab-bar显⽰内容
例如普通⽤户这⾥不显⽰赛事tab，特殊⽤户需要在进⼊⼩程序的时候显⽰赛事tab
实现⽅法
// app.js中请求当前登录权限，并将tab信息存到globalData中
// 请求回来之后判断is_competition_on字段
// 赋值给globalData中的tabList（默认只有两项）
that.globalData.tabList =[
{
"pagePath":"",
"text":"",
"iconPath":"/images/tabbar/",
"selectedIconPath":"/images/tabbar/"
},
{
"pagePath":"/pages/competitions/index/index",
"text":"赛事",
"iconPath":"/images/tabbar/match.png",
"selectedIconPath":"/images/tabbar/match-active.png"
},
{
"pagePath":"",
"text":"",
"iconPath":"",
"selectedIconPath":""
}
]
在custom-tab-bar组件中赋值给对应的list
let that =this
that.setData({
list: app.globalData.tabList
})
getApp().watch(that.watchBack.bind(that))// 监听并回调
},
methods:{
watchBack(list){
this.setData({
list: list
})
},
switchTab(e){
const data = e.currentTarget.dataset;
const url = data.path;
console.log(data,this.data.list);
console.log(e.currentTarget.dataset.index);
wx.switchTab({
url:url
})
}
}
注意由于请求权限时很有可能出现还没请求回来就执⾏了custom-tab-bar的attach⽅法，所以这个app.globalData.tabList很可能还是默认值，所以需要对globalData的tabList数据进⾏监听。
在监听这⼀步中getApp().watch(that.watchBack.bind(that))需要注意
// 如果是getApp().watch(that.watchBack)
// 那么在watchBack回调函数中执⾏this.setData 这个this指向的是undefined，因此需要改变this指向！
getApp().watch(that.watchBack.bind(that))
// 这⾥试验⽤call和apply⽆法改变this，原因后⾯来讲
// app.js中使⽤Object.defineProperty监听⾃定义watch函数
watch:function(method){
var obj =this.globalData;
var temp = obj.tabList;
Object.defineProperty(obj,"tabList",{
configurable:true,
enumerable:true,
set:(value)=>{
temp = value
method(value);// 这⾥回调传值
},
get:function(){。
return temp
selectediconpath什么意思}
})
},
这样下来就能正常的获取到tabList的值并且赋值 夹杂知识点Object.defineProperty
为什么call和apply不⾏
这⾥涉及到⼀个知识点
call，apply和bind的区别
先来看使⽤call和apply改变this指向的报错信息
method这⾥是app.js中watch传参，这⾥就很清楚了，call和apply的返回值不是函数⽽是调⽤函数的返回值，因此这⾥会报is not a function这个错误。
动态设置tab-bar还有需要注意的地⽅就是点击对应的tab时需要⾃⼰进⾏配置
实现⽅法是通过getTabBar()⽅法，具体也可以参考官⽅⽂档。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。