全网最全小程序自定义tabbar实现方案
业务需求,底部导航栏(tabbar)支持自定义,目前有个局限性,必须要在app.json里面声明list数组,而且数量是五个,导致扩展受限制。目前还没有解决办法,基本可以满足五个和小于五个自定义的已存在的tabbar的动态配置。 感谢网友的热心分享,以下链接地址都非常有参考价值:不过在当前时间点2020年6月5号,和对应的小程序版本号来说或多或少会遇到一些问题。 2022-08-30 补充: 首先很抱歉,就是图片看不到了.确实影响阅读体验. 然后这个方案是不成熟的, 大家可以巧用: wx.setTabBarItem 这个api,来做一些文章. 其实可以用wx.setTabBarItem https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html 参考地址:见文章结尾 自定义 tabBar 官方api地址:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html?search-key=%E8%87%AA%E5%AE%9A%E4%B9%89tabbar 效果图先上: [图片] 小程序自定义tabbar实现.gif 下面开始进入正文: 第一步、先下载官方的demo,然后进行合并。说明:这里存放的目录地址要是项目下和pages同目录,不然无法识别自定义的tabbar组件[图片] image.png 说明2,这个用的是全局设置的,需要加一下,不然不能开启自定义组件模式 "usingComponents": {},
"window": {
第二步、在 app.json 中的 tabBar 项指定 custom 字段,设置为true,同时其余 tabBar 相关配置也补充完整。说明:如果遇到报错,说什么组件不存在,可以把 custom 字段去掉,本项目没有去掉能正常使用。[图片] image.png 第三步、修改custom-tab-bar/index.js的文件说明,由于这里我们是后端动态返回的,这里我不展开说具体的业务,这里需要注意的是list中的pagePath一定要写绝对路径/pages开头第四步、把官方给的使用方法放到tabbar跳转页的onShow方法里,selected根据list下标位置进行设置selected: 这里的参数是对应的底部tabbar的顺序的,含义是进入当前界面,并选中这个当前的tabbar if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 4
})
}
第五步,关于点击后会闪一下这个问题的说明,目前官方也没有解决的方案,所以,除非必要,建议还是用自带的tabbar写业务。[图片] image.png 最后补充一个兼容跳到tabbar的语法糖: wx.navigateTo({
url: '/pages/cart_new/index/index',
success: function(res) {},
fail: function(res) {
wx.switchTab({
url: '/pages/cart_new/index/index', //注意switchTab只能跳转到带有tab的页面,不能跳转到不带tab的页面
})
},
complete: function(res) {},
})
参考地址: 微信小程序开发---自定义tabBar:https://segmentfault.com/a/1190000016283268 微信小程序自定义tabbar:https://www.jianshu.com/p/8b918e21cc6b 小程序自定义tabbar报Component is not found in path "custom-tab-bar/index":https://blog.csdn.net/qq_34672907/article/details/93624433 微信小程序自定义导航栏天大的坑,报错提示:component is not found in path "custom-tab-bar/index"...https://blog.csdn.net/dqzd12345/article/details/102756681 鉴于文中图片丢失:可以移步到我的博客看文中图片 https://www.jianshu.com/p/c48281e61907?u_atoken=b039edc7-97e0-4fa9-9d2d-4aca9a1faa87&u_asession=01VEYqQobFRt91aDKSjf6RMv2PFMk-NGAnJp1a80FUHt5puOXqVMQ49qq2C1XR8xKKX0KNBwm7Lovlpxjd_P_q4JsKWYrT3W_NKPr8w6oU7K_wjOK6EbT2ki0dkwQctnAQnHmbkqVcEgdObpAroqY1_GBkFo3NEHBv0PZUm6pbxQU&u_asig=05ESJ0rAXmqHXPIepLzgwTZn_I1UfOjo4mnyB5w-1YuP98oKPx90Z-OI_FpFckab0IKcUl39blHNAEIyPVHalH7evI9N43IRLtrs4TIbEtbub6fJW-7KGDLiz20hzMsz99AoqUieIp1TcUCwzplBT-dwzjA8FeyDmEzHEoYBRMWeH9JS7q8ZD7Xtz2Ly-b0kmuyAKRFSVJkkdwVUnyHAIJzYGzTYSVKNX8WdtkFZgDm7lSpGaDCR7AutzhN5tKbTbm6xbSxAaWh9ph0bRUFW-6vO3h9VXwMyh6PgyDIVSG1W-u2m4aSV3j7RjNp-oJ3rx3fX5y-uYeLDQishV-vt1GW8_QLnW4q9Rmwoz8SvMcA9UV9IzhK00je8y5MzvIwdeImWspDxyAEEo4kbsryBKb9Q&u_aref=uxwZVbN3vBalaKU8R2iVPkmS7C4%3D