微信小程序自定义tabBar
写法一:使用官方组件实现
-
第一步:设置app.json的tabBar项为custom:true,并开启usingComponents:{}
-
第二步:导入官方已经封装好的custom-tabbar组件
- 第三步:在每一个tab页的js文件下的onShow函数中都引入以下代码,同时在.json文件中开启 “usingComponents”:{}
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
},
- 第四步:修改官方组件的js文件中的页面路径,如下:
效果展示: