如何使用vant配置Tabbar

桃扇骨 2024-03-16 16:19 31阅读 0赞

## 如何使用vant配置Tabbar ##

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

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

![在这里插入图片描述][bedc2b2ab44e40a0aec469a2e48b4bfd.png]

然后我们创建一个components文件夹，再到里面创建一个common文件夹，然后创建TabbarView.vue组件  
![在这里插入图片描述][2ecb719663834f7d93ff3070fd3a4e93.png]

内容具体如下：

<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使用  
![在这里插入图片描述][a4bd37018e4d45918791e9b5d7d48d75.png]

*  HTML 部分

*  JavaScript 部分

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

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

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

当我们想要使用的时候只需要按照如下图的方式就可以了。  
![在这里插入图片描述][bb4f8df832a74c588b40a3d9e8eb67a7.png]

[vant]: https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar
[bedc2b2ab44e40a0aec469a2e48b4bfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1ccc9e1915f2424291f9de22f0af4cd2.png
[2ecb719663834f7d93ff3070fd3a4e93.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2692f32d4ab348b0bc4324c5f15dc92c.png
[a4bd37018e4d45918791e9b5d7d48d75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c5ad3c08439b420580abe0fa0c34d4a7.png
[bb4f8df832a74c588b40a3d9e8eb67a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/76b086d088f9419eac860c0dc53187dd.png