如何使用vant配置Tabbar

• 作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
• 座右铭：未来是不可确定的，慢慢来是最快的。
• 个人主页：极客李华-CSDN博客
• 合作方式：私聊+
• 这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
• 我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
• 微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

如何使用vant配置Tabbar

本文讲解如何通过vant配置Tabber功能。

首先肯定是通过vant官网找到Tabber

然后我们创建一个components文件夹，再到里面创建一个common文件夹，然后创建TabbarView.vue组件

内容具体如下：

<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" :active-icon="activeIcon('home')" to="/index">首页</van-tabbar-item>
    <van-tabbar-item icon="search" :active-icon="activeIcon('search')" to="/point">知识点</van-tabbar-item>
    <van-tabbar-item icon="friends-o" :active-icon="activeIcon('friends')" to="/exam">考试</van-tabbar-item>
    <van-tabbar-item icon="setting-o" :active-icon="activeIcon('setting')" to="/my">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>

export default {
  data() {
    return {
      active: 0,
      icons: {
        home: { normal: 'home-o', active: 'home' },
        search: { normal: 'search', active: 'search' },
        friends: { normal: 'friends-o', active: 'friends' },
        setting: { normal: 'setting-o', active: 'setting' },
      },
    };
  },
  methods: {
    activeIcon(icon) {
      return this.active === Object.keys(this.icons).indexOf(icon)
        ? this.icons[icon].active
        : this.icons[icon].normal;
    },
  },
};
</script>

代码详细解释：

需要搭配router下面的index.js使用

• HTML 部分

<template>
  <van-tabbar v-model="active">
    <!-- 第一项：图标为 home-o（未选中时的图标），
         选中时的图标为“home”，跳转至“/index”路径 -->
    <van-tabbar-item icon="home-o" :active-icon="activeIcon('home')" to="/index">首页</van-tabbar-item>

    <!-- 第二项：图标为 search（未选中时和选中时都是同一个图标），
         跳转至“/point”路径 -->
    <van-tabbar-item icon="search" :active-icon="activeIcon('search')" to="/point">知识点</van-tabbar-item>

    <!-- 第三项：图标为 friends-o（未选中时的图标），
         选中时的图标为“friends”，跳转至“/exam”路径 -->
    <van-tabbar-item icon="friends-o" :active-icon="activeIcon('friends')" to="/exam">考试</van-tabbar-item>

    <!-- 第四项：图标为 setting-o（未选中时的图标），
         选中时的图标为“setting”，跳转至“/my”路径 -->
    <van-tabbar-item icon="setting-o" :active-icon="activeIcon('setting')" to="/my">我的</van-tabbar-item>
  </van-tabbar>
</template>

• JavaScript 部分

<script>
export default {
  // 组件内部的数据
  data() {
    return {
      // 当前选中的选项卡序号，默认为第一个（序号从0开始）
      active: 0,

      // 定义各个图标在选中和未选中状态下应该显示的图标名称
      icons: {
        home: { normal: 'home-o', active: 'home' },
        search: { normal: 'search', active: 'search' },
        friends: { normal: 'friends-o', active: 'friends' },
        setting: { normal: 'setting-o', active: 'setting' },
      },
    };
  },

  // 定义组件内部的方法
  methods: {
    // 返回指定图标在当前选中状态下应该显示的图标名称
    activeIcon(icon) {
      // 获取当前选中的选项卡序号
      const activeIndex = Object.keys(this.icons).indexOf(icon);

      // 判断当前图标是否被选中，是则返回对应的选中状态的图标名称，否则返回未选中状态的图标名称
      return this.active === activeIndex ? this.icons[icon].active : this.icons[icon].normal;
    },
  },
};
</script>

整个代码部分使用了 Vue.js 的单文件组件结构，在 template 标签中定义了该组件的 HTML 内容，在 script 标签中定义了该组件的 JavaScript 内容。

其中，组件中包含了四个选项卡，并通过 v-model="active" 将当前选中的选项卡序号绑定到 active 属性，实现了选项卡的切换。

组件中还定义了一个方法 activeIcon(icon)，该方法根据当前选中状态返回给定图标的相应名称。其中 icons 对象保存了每个图标在不同状态下应该当前显示名称。在该方法中，先获取当前图标在 icons 对象中的序号，然后根据当前是否选中来判断返回对应的名称。

当我们想要使用的时候只需要按照如下图的方式就可以了。

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下