小程序自定义TabBar
需求背景:根据用户的不同种类,来展示不同的tab菜单
实现方案:主要根据官方提供的自定义TabBar方法
方案描述:
- 在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": [
{
"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": "接口"
}
]
}
- 根据官方提示,在根目录下创建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
})
}
}
})
- 在每一个tab页面,加上对tab的选中效果处理,自定义tabBar组件提供getTabBar()方法,可获取当前页面下的自定义 tabBar 组件实例
//tab页面的onshow方法的配置,组件可在show()方法中设置
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
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需求的伙伴们,有问题欢迎指正~