⼩程序⾃定义TabBar实现动态配置
⼩程序⾃定义TabBar
需求背景：根据⽤户的不同种类，来展⽰不同的tab菜单
实现⽅案：主要根据官⽅提供的⾃定义TabBar⽅法
⽅案描述：
1. 在app.json 中的 tabBar 项指定 “custom”: true，同时将两套tab的path配置到tabBar项中 （注意：tabbar最多限制只能配置五
个），不在app.json中配置会出现⽆法跳转或者不展⽰tabBar的情况
例：根据⾃⼰的需求将tabBar配置好
//app.json的tabBar配置
"tabBar":{
"custom":true,
"color":"#7A7E83",
"selectedColor":"#3cc51f",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list":[
{
selectediconpath什么意思"pagePath":"index/index",
"iconPath":"image/icon_component.png",
"selectedIconPath":"image/icon_component_HL.png",
"text":"组件"
},
{
"pagePath":"index/index2",
"iconPath":"image/icon_API.png",
"selectedIconPath":"image/icon_API_HL.png",
"text":"接⼝"
}
]
}
2. 根据官⽅提⽰，在根⽬录下创建custom-tab-bar⽂件（component），该组件完全接管tabBar的渲染，在组件中根据当前⽤户类
型，动态配置当前展⽰的tabBar
// custom-tab-bar.js
Component({
data:{
selected:0,
color:"#7A7E83",
selectedColor:"#3cc51f",
list: TabBarA // 设置默认tabBar
},
// 每次点击tab页会触发custom-tab-bar组件的attached()⽅法
// type指的是⽤户类型，TabBarA、TabBarB指的是不同⽤户的tabBar具体的配置
attached(){
this.setData({
list: type ===1? TabBarA : TabBarB
})
},
methods:{
switchTab(e){
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})
3. 在每⼀个tab页⾯，加上对tab的选中效果处理，⾃定义tabBar组件提供getTabBar()⽅法，可获取当前页⾯下的⾃定义 tabBar 组件
实例
//tab页⾯的onshow⽅法的配置，组件可在show()⽅法中设置
if(TabBar ==='function'&&
selected:0//当前选中的tab索引，设置选中状态
})
}
具体⾃定义tabBar的demo可参考官⽅⽂档：
遇到的问题： 由于限制tabBar只能配置5个，在我们的tabBar超出数量范围的情况可参考以下⽅案:
1）将tabBar封装为组件在不同的Tab页⾯引⼊即可，每次点击做⼀次跳转，该⽅案不需要思考tabBar的配置问题，本质上和其他的页⾯是⼀样的，页⾯看起来可以实现tabBar的效果，由于每次跳转都要刷新页⾯，所以会存在闪动问题，但可以解决超过5个tab的限制进⾏个性化设计。
2）将Tab的每个页⾯作为组件，将tabBar作为当前的page页，根据点击的tab不同，展⽰不同的组件，可以实现tabBar的切换，同时也解决了闪动的问题。 3）对于处理逻辑不复杂的页⾯，例如 "我的" 页⾯⼤部分都是类似的，也可以考虑共⽤同⼀个path，但是不太建议这样做，后期维护会⽐较⿇烦
⽬前官⽅⽂档对于⾃定义tabBar的说明较少，期待后期的改善，⽅案仅供参考，希望能帮助到有⾃定义tabBar需求的伙伴们，有问题欢迎指正~

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