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

2022-01-11 09:41:38

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

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

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

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

//wxml
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{active === index ? item.selectedIconPath : item.iconPath}}">
    <text style="color: {{active === index ? selectedColor : color}}">{{item.text}}</text>
</van-tabbar-item>
</van-tabbar>

//js 
Component({
    data: {
      active: '',
      color: "#C2C6D0",
      selectedColor: "#FFA065",
      list: [{
          "selectedIconPath": "/static/icon/icon_xcx_c_bar_home@3x.png",
          "iconPath": "/static/icon/icon_xcx_c_bar_home_gray@3x.png",
          "pagePath": "/pages/index/main",
          "text": "首页"
        },
        {
          "selectedIconPath": "/static/icon/icon_xcx_c_bar_store_color@3x.png",
          "iconPath": "/static/icon/icon_xcx_c_bar_store_gary@3x.png",
          "pagePath": "/pages/store-list/main",
          "text": "找店"
        },
        {
          "selectedIconPath": "/static/icon/icon_xcx_c_bar_mine_color@3x.png",
          "iconPath": "/static/icon/icon_xcx_c_bar_mine_gary@3x.png",
          "pagePath": "/pages/vip/main",
          "text": "会员"
        }
      ]
    },
    methods: {
      onChange(e) {
        wx.switchTab({
          url: this.data.list[e.detail].pagePath
        });
        this.setData({
          active: e.detail
        });
      }
    }
  });

//json
{
    "component": true,
    "usingComponents": {
      "van-tabbar": "/static/vant/tabbar/index",
      "van-tabbar-item": "/static/vant/tabbar-item/index"
    }
  }

在每一个tab页面通过 getTabBar 接口获取组件实例，并调用 setData 更新active值

onShow () {
    this.$root.$mp.page.getTabBar().setData({
        active: 0 //对应页面的index
    })
}

到这里功能应该已经实现了，接下来就是打包发布了。但是此时有一个很致命的问题，因为一开始custom-tab-bar文件夹是创建在dist目录中，当我们进行打包时，会生成一个没有custom-tab-bar文件夹的dist目录，很不幸，刚刚好不容易写完的custom-tab-bar文件夹没了。。。这个问题暂时可以采取这种方式解决：

当我们在开发工具上调试的时候可以直接在dist目录中创建custom-tab-bar文件夹，但是如果这个功能需要上线，那么需要在src目录下，创建custom-tab-bar文件夹（需与pages文件夹同级）。
打开build文件夹下的webpack.base.conf.js，在plugins数组中添加新的插件：

    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/custom-tab-bar'),
        to: path.resolve(config.build.assetsRoot, './custom-tab-bar'),
        ignore: ['.*']
      }
    ])

这样打包之后，可以将src下的custom-tab-bar文件夹打包到dist目录下。

码农公寓

相关文章