Javascript

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

本文主要是介绍基于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="{{ 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"
    }
  }
  1. 在每一个tab页面通过 getTabBar 接口获取组件实例,并调用 setData 更新active值
onShow () {
    this.$root.$mp.page.getTabBar().setData({
        active: 0 //对应页面的index
    })
}
  1. 到这里功能应该已经实现了,接下来就是打包发布了。但是此时有一个很致命的问题,因为一开始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目录下。

这篇关于基于mpvue+vant自定义微信小程序的tabbar组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!