Nuxt - Vant 2 Tabbar 标签栏（详细使用教程）

前言

使用 Nuxt.js 做移动端，采用 Vant 2 作为组件库，网上大部分 Tabbar 标签栏组件使用都是不规范的。

本文将带您一路复制，从 0-1 完成该功能，

具体效果如下图所示：

第一步

首先要将组件进行封装，后续使用或维护方便。

打开项目 components 目录，

建一个 tabbar.vue 组件，复制并修改以下代码：

<template>
  <div>
    <van-tabbar
    v-model="isAct"
    active-color="#4974FD"
    route
    >
        <van-tabbar-item
        v-for="(item, index) in list"
        :key="index"
        :icon="item.icon"
        :to="item.url"
        >
            {{ item.name }}
        van-tabbar-item>
    van-tabbar>
  div>
template>

<script>
export default {

    props: {
      active: {
        type: [String, Number],
        default: 0,
      }
    },

    // 对active进行监听赋值
    watch: {
      active: {
        immediate: true,
        handler(value) {
          // String类型无效,转换一下
          this.isAct = parseInt(value) 
        }
      }
    },

    data() {
        return {
            // 当前索引
            isAct: 0,
            // 图标及名称/路由等
            list: [
                {
                    name: '首页',//名称
                    url: '/',//路由
                    icon: 'wap-home'//图标
                },
                {
                    name: '学校',
                    url: '/school',
                    icon: 'shop'
                },
                {
                    name: '资讯',
                    url: '/info',
                    icon: "column"
                },
                {
                    name: '试题',
                    url: '/quest',
                    icon: "graphic"
                },
                {
                    name: '我的',
                    url: '/my',
                    icon: "manager"
                },
            ]

        }
    },
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

第二步

由于很多页面需要使用，故注册为全局组件。

打开项目 plugins 文件夹，

建一个 components.js 文件，复制并修改以下代码：

import Vue from 'vue';

// public components
import tabbar from '@/components/tabbar.vue';//注意路径！！

Vue.component('Tabbar', tabbar)
1
2
3
4
5
6

Android Navigation TabBar控件实现多彩标签栏

pdf 0星 超过10%的资源 97KB

下载

接着打开 nuxt.config.js 配置文件，在 plugins 配置项中加入以下代码：

{ src: '@/plugins/components', ssr: true }
1

第三步

马上准备就绪，我们先来准备点页面。

您需要在 pages 目录下建立几个页面，代码为空即可。

Nuxt 会自动生成路由

开始测试

请您放大如下图片，引入组件及修改相关代码：

请您仔细分析，便可成功完成！

SEO

Nuxt - Vant 2 Tabbar 标签栏（详细使用教程），Nuxt使用vant导航栏组件tabbar，Vant Tabbar 标签栏 | Vant 教程，Nuxt怎么使用Vant 2 Tabbar 标签栏？Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件，Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件，vant2 tabbar_tabbar_js tabbar，Vant的Tabbar标签栏引入自定义图标方式，超详细教程实现Vue底部导航栏TabBar，vue中使用vant组件库中的tabbar标签栏组件。