当前位置: 首页 > 软件编程 > 小程序 > Vant Weapp在微信小程序中Tabbar的使用

Vant Weapp在微信小程序中Tabbar的使用

发布于:2022-11-24 小程序 0条评论 6,836 views
本站提供Linux服务器运维,自动化脚本编写等服务,如有需要请联系博主微信:xiaozme

Vant Weapp是有赞提供的微信小程序UI组件,可以配合微信小程序开发出更加漂亮的界面,最近在开发IPRSS小程序的时候,微信自定义Tabbar搞了许久,踩了一些坑,记录和分享一下。

场景

我这里并没有使用微信原生提供的Tabbar功能,而是使用了Vant Weapp提供的Tabbar组件 + 微信自定义Tabbar

代码示例

根据微信小程序官方文档,我们需要先修改app.json中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。代码如下:

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "我的"
      },
      {
        "pagePath": "pages/query/query",
        "text": "IP查询"
      },
      {
        "pagePath": "pages/ipv6/ipv6",
        "text": "IPV6检测"
      },
      {
        "pagePath": "pages/about/index",
        "text": "关于我们"
      }
    ]
  }

因为我们要使用Vant Weapp的Tabbar,所以还需要在app.json中使用这个组件,代码如下:

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

然后在小程序的根目录下创建一个文件夹,名称为custom-tab-bar,必须要使用这个名字,因为微信是把这个路径和名称固定死的(微信SB)。在这个目录下新建一个组件,组件名称为index,目录截图如下:

custom-tab-bar/index.wxml视图中编写Vant Weapp的Tabbar代码,代码示例如下:

<view>
  <van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item icon="home-o" data-page="home" data-target="/pages/index/index">
      我的
    </van-tabbar-item>
    <van-tabbar-item icon="search" data-page="query" data-target="/pages/query/query">
      IP查询
    </van-tabbar-item>
    <van-tabbar-item icon="location-o" data-page="ipv6" data-target="/pages/ipv6/ipv6">
      IPV6检测
    </van-tabbar-item>
    <van-tabbar-item icon="info-o" data-page="about" data-target="/pages/batch/query">
      关于我们
    </van-tabbar-item>
  </van-tabbar>
</view>

继续修改custom-tab-bar/index.js里面的方法,在methods这个函数里面添加如下代码:

onChange(event) {
      // event.detail 的值为当前选中项的索引
      var that = this
      switch (event.detail) {
        case 0:
          wx.switchTab({
            url: '/pages/index/index'
          })
          break
        case 1:
          wx.switchTab({
            url: '/pages/query/query'
          })
          break;
        case 2:
          wx.switchTab({
            url: '/pages/ipv6/ipv6'
          })
          break;
        case 3:
          wx.switchTab({
            url: '/pages/about/index'
          })
          break;
        default:
          break;
      }
    },
    init(active){
      this.setData({active:active})
    }

上面的代码增加了2个函数,一个是onChange,一个是init

  • onChange函数作用:用户点击Tabbar的时候调用微信内置函数wx.switchTab()进行Tab切换
  • init函数作用:改变active属性,从而告诉Tabbar用户点击的是第几个Tab

然后修改你的页面函数pages/xxx/xxx.js(每个Tabbar的页面都要添加),在onShow函数里面调用上面的init()方法,代码如下:

/**
   * 生命周期函数--监听页面显示
   */
onShow() {
    this.getTabBar().init(3)
  },
  • 数字3这个参数,代码你这个页面属于第几个Tab,从0开始计算,如下图。

至此,Vant Weapp的Tabbar + 小程序自定义Tabbar就算完成了,具体效果可以扫码访问IPRSS小程序查看。

其它说明

我这个方法可能不够灵活,一旦页面Tabbar的顺序变化就要重新去修改init调用函数。有兴趣的可以参考这个开发者提供的几种方法:https://github.com/youzan/vant-weapp/issues/3992

另外上面用到了微信的部分内置函数,相关文档如下:


发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注