如何使用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 对象中的序号，然后根据当前是否选中来判断返回对应的名称。

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