vue移动端Tabbar 标签栏（简单）

目录

效果图

实现步骤：

1.通过 npm 安装

2.引入组件

自动按需导入

3.配置

4.Tabbar 标签栏使用

前提准备：

使用：

 参数说明：

---

使用组件：Vant

Vant 是一个轻量、可靠的移动端组件库

效果图

实现步骤：

1.通过 npm 安装

在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

# Vue 3 项目，安装最新版 Vant：

npm i vant -S

# Vue 2 项目，安装 Vant 2：

npm i vant@latest-v2 -S

2.引入组件

自动按需导入

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，推荐自动按需引入组件

项目终端执行命令安装插件：

npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

3.配置

第一种：对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

 第二种：在.babelrc 中添加配置

// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

4.Tabbar 标签栏使用

前提准备：

在views文件夹下新建几个跳转页面

在router/index.js配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home/index.vue'
 
Vue.use(VueRouter)
 
const routes = [
    {
        path: '/',
        redirect: "/home"
    },
    {
        path: '/home',
        name: 'home',
        component: Home
    },
    {
        path: '/classify',
        name: 'classify',
        component: () => import('../views/classify/index.vue')
    },
    {
        path: '/cart',
        name: 'cart',
        component: () => import('../views/cart/index.vue')
    },
    {
        path: '/my',
        name: 'my',
        component: () => import('../views/my/index.vue')
    },
 
]
 
const router = new VueRouter({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes
})
 
export default router

使用：

在main.js中全局按需引入：

import { Tabbar, TabbarItem } from 'vant';
 
Vue.use(Tabbar);
Vue.use(TabbarItem);

在App.vue中使用：

<template>
  <div id="app">
    <van-tabbar route active-color="#ee0a24" v-if="isTabShow">
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页van-tabbar-item>
      <van-tabbar-item replace to="/classify" icon="search">分类van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o">购物车van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="manager-o">我的van-tabbar-item>
    van-tabbar>
    <router-view>router-view>
  div>
template>
<script>
export default {
  data() {
    return {
      //true为显示tabbar栏，false为隐藏
      isTabShow: true
    }
  },
  //监听路由变化，显示或隐藏tabbar栏
  watch: {
    "$route": function (to) {
      var tabArr = ["/home", "/classify", "/cart", "/my"];
      if (tabArr.includes(to.path)) {
        this.isTabShow = true
      } else {
        this.isTabShow = false
      }
    }
  },
}
script>

 参数说明：

active-color：选中时的颜色

icon：图标，文档，引用图标下方的名字

replace to：跳转路径，与router/index.js中的path相对应