基于mpvue+vant自定义微信小程序的tabbar组件

首先附上微信小程序自定义tabbar开发文档地址：传送门
一直使用的都是微信原生的tabbar组件，这一次想给小程序加一个功能，实现首页弹窗轮播图全屏覆盖（弹窗遮罩层盖住小程序原生的头部和底部导航组件），小程序原生的底部tabbar组件默认层级是最高的，无法被其余组件和标签遮盖，要实现遮罩层盖住tabbar组件只能舍弃掉原生的tabbar，自定义一个tabbar了。

先看我的小程序的层级结构：

接下来是自定义tabbar组件的开发步骤：

1. 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。示例在官方文档中有，一样的图这边就不贴了。
2. dist内创建custom-tab-bar文件夹和pages同级。这边就不参照官方文档了，不要把custom-tab-bar文件夹创建在src文件夹下和pages同级，也不要创建在项目根目录下，要把custom-tab-bar文件夹dist内自定义tabbar组件才能生效。
3. 接着创建入口文件：
   custom-tab-bar/index.js
   custom-tab-bar/index.json
   custom-tab-bar/index.wxml
   custom-tab-bar/index.wxss
4. index.wxss可参照示例代码，这边贴一下wxml，js和json代码。

//wxml
<van-tabbar active