微信小程序自定义tabbar

微信小程序自定义tabbar

因公司业务需要，需要根据用户的不同角色展示不同的tabbar页面。微信小程序现有的在app.json中配置tabbar以及相应的api无法实现tabbar的动态切换，因此需要采用自定义tabbar的方式实现tabbar的动态切换。

一、 微信小程序自定义tabbar配置

1. 在app.json中配置tabbar相关信息，并指定custom字段为true;

2. 所有 tab 页的 json 里需声明usingComponents项，也可以在app.json全局开启;

3. 项目根目录下添加tabbar代码文件

   custom-tab-bar/index
   

二、遇到的问题

1. 自定义tabbar在实现中会出现tabbar切换页面时闪动的情况，该问题在社区反馈较多，官方暂时还没有解决方案。

2. 为tabbar某一项添加右上角文本(badge)。每个tab页下的自定义tabbar实例是不同的，可以在app.globalData中定义全局变量保存所有tab页的自定义tabbar实例，添加文本时循环所有tabbar实例添加badge。