vant移动端 Vue 组件库的使用之Tabbar 标签栏

image.png

vant 是轻量、可靠的移动端 Vue 组件库

特性

• 50+ 个经过有赞线上业务检验的组件
• 80%+ 单元测试覆盖率
• 完善的文档和示例
• 支持 babel-plugin-import
• 支持 TypeScript
• 支持 SSR

快速上手

脚手架

推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

安装

NPM

npm i vant -S

YARN

yarn add vant

CDN

按需引入组件

在不使用插件的情况下，可以手动引入需要的组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

NavBar 导航栏 的使用

import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar).use(TabbarItem);

项目中使用

tab-bar组件

main 组件

---

问题

假如从首页进入某一页面，点击返回首页，Tabbar标签栏不会被选中？

解决

image.png

在首页上添加mounted钩子函数，动态获取地址栏上的hash值来判断当前时哪个页面。

image.png

可以轻松解决这个问题

---

记录于 2019-3-11 18:59