移动端vant时间选择器_vue移动端组件库（vant）

【摘要】在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 Vue​youzan.github.io 新人创作打卡挑战赛发博客就能抽奖！定制产品红包拿不停！

总结

以上是生活随笔为你收集整理的移动端vant时间选择器_vue移动端组件库（vant）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。