小技巧！轻松解决原生微信小程序使用vant的tabbar时切换图标的难题

借助自定义 Tabbar 组件，解决小程序中 Vanta Tabbar 样式切换延迟的问题

介绍

在将强大而流行的 Vanta UI 框架集成到微信小程序时，我们有时会遇到一个令人沮丧的问题：使用 Vanta 的 Tabbar 组件（标签栏）在页面之间切换时，图标的样式无法及时更新。首次点击图标时，样式不会立即切换到相应图标，而是需要再次点击才能正确切换。

问题分析

该问题源于 Vanta Tabbar 组件在切换页面时，未能及时更新其内部状态。这意味着，当用户首次点击一个图标时，组件仍处于前一个页面的状态，因此无法正确显示新页面的图标样式。

解决方案：自定义 Tabbar 组件

解决这一难题的方法是，为每个使用 Tabbar 组件的页面创建一个自定义组件。在自定义组件的 onShow 生命周期函数中，我们可以初始化 active 值，将其与页面对应的图标相匹配。

实施步骤

1. 引入并注册 Vanta Tabbar 组件 ：

import { Tabbar, TabbarItem } from '@vant/weapp';

Component({
  usingComponents: {
    'van-tabbar': '/path/to/vant-tabbar',
    'van-tabbar-item': '/path/to/vant-tabbar-item',
  },

2. 创建自定义 Tabbar 组件 ：

在名为 custom-tabbar 的文件夹中，创建一个 index.js 文件和一个 index.json 文件。

// custom-tabbar/index.js
import { Tabbar, TabbarItem } from '@vant/weapp';

Component({
  data: {
    active: 0,
  },
  methods: {
    onChange(e) {
      this.setData({
        active: e.detail,
      });
    },
  },
});

// custom-tabbar/index.json
{
  "usingComponents": {
    "van-tabbar": "/custom-tabbar/index",
    "van-tabbar-item": "/custom-tabbar/index"
  }
}

3. 在页面中使用自定义 Tabbar 组件 ：

将 Vanta Tabbar 组件替换为自定义 Tabbar 组件：

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o" url="/pages/index/index">首页</van-tabbar-item>
  <van-tabbar-item icon="message-o" url="/pages/chat/chat">消息</van-tabbar-item>
  <van-tabbar-item icon="user-o" url="/pages/user/user">我的</van-tabbar-item>
</van-tabbar>

4. 初始化 active 值 ：

在每个页面的 onShow 生命周期函数中，初始化 active 值为 0：

// page.js
onShow() {
  this.setData({
    active: 0,
  });
}

结论

通过实施这些步骤，我们在 Vanta Tabbar 组件中引入了自定义逻辑，从而在页面切换时确保图标样式的及时更新。这显著改善了用户体验，并防止了令人沮丧的样式延迟问题。

常见问题解答

• 为什么需要自定义 Tabbar 组件？

Vanta Tabbar 组件本身无法在页面切换时自动更新其状态。自定义组件允许我们添加必要的逻辑，以确保图标样式的及时切换。

• 是否可以在多个页面中使用自定义 Tabbar 组件？

是的，您可以将自定义 Tabbar 组件导入到需要使用它的所有页面中。只需确保每个页面的 onShow 生命周期函数中初始化 active 值即可。

• 如果更改了 Tabbar 项的顺序，该怎么办？

如果您更改了 Tabbar 项的顺序，您需要更新自定义 Tabbar 组件中的 active 值，以匹配新的顺序。

• 如何将自定义 Tabbar 组件添加到项目中？

将 custom-tabbar 文件夹添加到您的项目中。然后在每个需要使用它的页面中导入并注册组件。

• 我可以将自定义 Tabbar 组件发布到 npm 上吗？

当然可以！如果您认为您的自定义 Tabbar 组件对其他人有用，您可以将其发布到 npm 上，以便他们也可以从中受益。