【摘要】在vue中有许多组件库，vant就是一套主要为移动端网站开发的开源的移动端组件库...
【作者：黄可毅】
一、vant安装以及使用经历
1.vant安装
在Vue 2 项目，安装 Vant 2.x 版本： npm i vant -S
在Vue 3 项目，安装 Vant 3.x 版本： npm i vant@next -S
2.vant引用
vant可以全局引用或者按需引用
全局引用：在main.js里引用，如图所示
import Vant from'vant';
import'vant/lib/index.css';
Vue.use(Vant);
2.手动按需引入组件：在所要使用组件的页面中引入（下面是手动引入button组件）
import Button from'vant/lib/button';
import'vant/lib/button/style';
二、在项目中使用的vant组件
1.swipe组件
这个组件就是我们平时所用的轮播图
如果是用的全局导入就可以直接使用，如果是手动按需引入使用上面的方法引入对应文件
<van-swipe :autoplay="3000"><van-swipe-item><img src=""/></van-swipe-item><van-swipe-item><img src=""/></van-swipe-item><van-swipe-item><img src=""/></van-swipe-item><van-swipe-item><img src=""/></van-swipe-item></van-swipe>
自动轮播间隔，单位为 ms: autoplay
是否开启循环播放:loop
是否为纵向滚动:vertical
是否可以通过手势滑动:touchable
下面是我在demo中使用循环写的
2.Tab 标签页
可以用来做tab切换
<van-tabs v-model="active"swipeable animated sticky><van-tab v-for="index in 4":title="'标签' + index"> 内容 </van-tab></van-tabs>
是否禁用标签：disabled
图标右上角徽标的内容：badge
是否开启手势滑动切换：swipeable
底部条宽度，默认单位px：line-width
底部条高度，默认单位px：line-height
是否开启切换标签内容时的转场动画：animated
下面是在demo中的实践
vant tab切换加list列表实例
swipeable 开启滑动切换
animated 添加滑动过程的动画
顶部标题通过循环渲染
通过v-model绑定当前激活标签对应的索引值，默认情况下启用第一个标签。
通过v-show来实现对应标签下的数据
例如 v-show="active == 0" 显示账单页中的内容
<van-tabs v-model="active" swipeable animated sticky><van-tabv-for="(item, index) in toptab":key="index":title="item.title"@click="change(index)"class="tab-position"><van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad" :offset="10":immediate-check="false"v-show="active == 0"><p>账单中的内容</p></van-list><divclass="zhuang"v-for="(rmb, yue) in moneyData":key="yue"v-show="active == 1"><p>余额页内容</p></div><divclass="zhuang"v-for="(ji, jifen) in integralData":key="jifen"v-show="active == 2"><p>积分页内容</p></div><div class="h52"></div></van-tab></van-tabs>
下面是vant官网
Mobile UI Components built on Vueyouzan.github.io
