微信小程序的tabBar目前支持添加2-5项,而且可以通过setTabBarItem方法动态设置 tabBar 某一项的内容。从基础库2.7.0开始,tabBar的icon也开始支持网络图片了,这已经极大的满足了日常需求。但是作为第三方服务商来说,用户需求复杂多变,不同的用户对小程序的风格要求不尽相同,对tabBar样式做修改的需求经常遇到,此时我们就要用到自定义tabBar了。

1.配置自定义tabBar
a.在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。 b.所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。

2.添加 tabBar 代码文件
在代码根目录下添加入口文件:

注意是在根目录下添加!

3.在tabBar页面通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。

注意:使用自定义tabBar以后,与 tabBar 样式相关的接口,如 wx.setTabBarItem 等将失效。