小程序 | 案例---自定义tabBar

案例效果

通过让页面数字增加，tabBar上面的数字也增加。

在此案例中，用到的主要知识点如下：

• 自定义组件
• Vant 组件库
• MobX 数据共享
• 组件样式隔离
• 组件数据监听器
• 组件的 behaviors
• Vant 样式覆盖

实现步骤

自定义 tabBar 分为 3 大步骤，分别是：

1. 配置信息
2. 添加 tabBar 代码文件
3. 编写 tabBar 代码

详细步骤，可以参考小程序官方给出的文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

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

添加 tabBar 代码文件

在代码根目录下添加入口文件

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
1
2
3
4

• 添加后原本的 tabBar 就会展示我们custom-tab-bar该目录下的结构
  

编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。

另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

Vant Weapp ------tabBar标签栏 ⭐看文档！！！