【摘要】在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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。