菜鸟爬坑记录：Vant Weapp 3点击 Tabbar 子项跳转到对应页面

2023-12-20 18:22:50

引言

在使用 Vant Weapp 3 框架开发小程序时，需要实现 Tabbar 点击跳转功能，但是遇到了不少坑，踩了不少雷，在此分享一下我的踩坑记录，希望能帮助其他开发者避免类似问题。

坑 1：点击 Tabbar 子项后，子项不会进入活跃状态

在输入完基础用法样例中的代码后发现：点击 tabbar 子项后，该子项将会进入活跃状态。我们需要的 tabbar 点击跳转功能就已经实现一半了。然而在代码输入完成后，测试却发现实际效果并不和预想中的一样... 从 gif 图中可以看到，点击 Tabbar 子项后，子项并没有进入活跃状态，也没有跳转到对应的页面。

解决方法：在点击 Tabbar 子项后，手动将该子项设置为活跃状态。可以在 onTabItemTap 函数中添加如下代码：

this.setData({
  active: index
})

坑 2：点击 Tabbar 子项后，页面没有跳转

在解决第一个坑之后，发现点击 Tabbar 子项后，页面还是没有跳转。这是因为在 Vant Weapp 3 中，Tabbar 的跳转功能是通过 navigateTo API 实现的。因此，需要在 onTabItemTap 函数中添加如下代码：

wx.navigateTo({
  url: `/pages/${pagePath}/index`
})

其中，pagePath 是要跳转到的页面的路径。

坑 3：Tabbar 子项的图标和文字不显示

在解决前面两个坑之后，发现 Tabbar 子项的图标和文字不显示。这是因为在 Vant Weapp 3 中，Tabbar 子项的图标和文字需要通过 icon 和 text 属性来设置。因此，需要在 onTabItemTap 函数中添加如下代码：

this.setData({
  list: [
    {
      pagePath: '/pages/index/index',
      icon: 'home-o',
      text: '首页'
    },
    {
      pagePath: '/pages/cart/index',
      icon: 'shopping-cart-o',
      text: '购物车'
    },
    {
      pagePath: '/pages/user/index',
      icon: 'user-o',
      text: '我的'
    }
  ]
})