微信小程序：自定义tabBar

1、配置信息

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

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

2、添加tabBar代码文件

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

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

在项目根目录创建一个名为 custom-tab-bar 的文件夹，在内部添加自定义组件，名字叫index

3、编写tabBar代码

在 wxml 文件中通过 wx:for 遍历 tabBar 的 list 选项，添加自定义属性 path 和 index ，绑定点击事件 switchTab 。

在 wxss 文件中控制自定义 tabBar 的样式。

在 js 文件中处理跳转。单击切换的时候获得单击的那一项的路径和索引，通过 switchTab 实现切换。

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