通常情況下直颅，我們在使用輪播圖時(shí)刮便，首先會(huì)想到swiper插件褪秀，但是在vue-cli腳手架中使用swiper會(huì)出現(xiàn)某些版本的一些功能不可以使用蓄诽，會(huì)造成困擾。
其實(shí)媒吗，使用vant也是一個(gè)不錯(cuò)的選擇仑氛，本文就是針對在vue-cli腳手架中使用vant的具體且詳細(xì)用法（以swipe舉例，其他組件用法相同），可以仔細(xì)閱讀哦锯岖！
網(wǎng)址：https://vant-ui.github.io/vant/v2/
1.安裝包
//vant@latest-v2 在vue2中使用
npm i vant@latest-v2 -s
2.按需導(dǎo)入
- 通常情況下我們會(huì)在src路徑下創(chuàng)建util文件下創(chuàng)建一個(gè)js文件介袜，當(dāng)然也可以直接在入口文件中導(dǎo)入。
- 在vant中出吹，有許多我們可以用到的組件遇伞，我們可以根據(jù)需求按需導(dǎo)入。
- 例如這里捶牢，我用的是vant中的swipe鸠珠，就只需要導(dǎo)入 Swipe,SwipeItem組件即可。
//在src路徑下創(chuàng)建util文件下創(chuàng)建一個(gè)js文件（vantCom.js）
import Vue from 'vue'
//導(dǎo)入vant所有的樣式
import 'vant/lib/index.css'
//按需導(dǎo)入（組件）
import {Swipe,SwipeItem} from 'vant'
//Vue掛在vant組件---在所有的.vue文件都可以使用van-swipe,van-swipe-item
Vue.use(Swipe)
Vue.use(SwipeItem)
3.在main.js中導(dǎo)入
//在入口文件中導(dǎo)入vantCom.js文件
import '@/util/vantCom.js'
4.可以參照下圖
具體步驟
5.在components組件在使用
<template>
<div class="">
<div class="Swiper">
<!-- 輪播圖 -->
<!--
1. van-swipe相當(dāng)于輪播圖的容器
可以在容器上設(shè)置api
常用的api：
(1)autoplay：自動(dòng)輪播間隔的事件1000秋麸，相當(dāng)于1秒
(2)loop：是否開啟循環(huán)播放
(3)vertical：是否為縱向滾動(dòng)
(4)touchable：是否可以通過手勢滑動(dòng)
(5)show-indicators：是否顯示指示器（分頁器）
(6)indicator-color：指示器顏色
swipe Events事件
(1)change：每一頁輪播結(jié)束后觸發(fā) || 回調(diào)參數(shù)：index渐排，當(dāng)前頁的索引值
-->
<van-swipe ref="swipeRef" class="my-swipe" :autoplay="3000" indicator-color="white" @change="handleChange">
<!--
2. van-swipe-item代表每一張輪播的卡片（圖片）
SwipeItem Events事件
(1)click：點(diǎn)擊每一頁的輪播圖觸發(fā) || 回調(diào)參數(shù)：event:Event
例如：點(diǎn)輪播圖可以跳轉(zhuǎn)到新的頁面
-->
<van-swipe-item v-for="(item,index) in swiperList" :key="index" @click="handleSwipeClick">
<img :src="item" alt="" class="pic">
</van-swipe-item>
<!--
3.自定義指示器 替換掉默認(rèn)的小圓點(diǎn)指示器 indicator插槽
-->
<template v-slot:indicator>
<p class="myIndicator">{{current+1}}/{{swiperList.length}}</p>
</template>
</van-swipe>
<!--
4.通過按鈕觸發(fā)swipe組件的滾動(dòng)
swipe方法：通過 ref 可以獲取到 Swipe 實(shí)例并調(diào)用實(shí)例方法
(1)prev：切換到上一輪播
(2)next：切換到下一輪播
(3)swipeTo：切換到指定位置 || 參數(shù)：index: number, options: Options
-->
<a href="#" @click="handlePrev" class="prev"><</a>
<a href="#" @click="handleNext" class="next">></a>
<input type="button" value="跳轉(zhuǎn)第二張" @click="handleSwipeTo">
</div>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
current:'',
swiperList:[]
}
},
methods: {
// 獲取輪播圖的數(shù)據(jù)
async getSwiperList (){
let {data} = await this.$http('cate')
console.log(data.swipe)
this.swiperList=data.swipe
},
// 獲取當(dāng)前頁的索引
handleChange(i){
this.current=i
},
// 點(diǎn)擊跳轉(zhuǎn)到其他的頁面
handleSwipeClick(e){
console.log(e)//事件源
// this.$router.push({name:'/指定路由'})
},
// 點(diǎn)擊跳轉(zhuǎn)到上一頁
handlePrev(){
this.$refs.swipeRef.prev()
},
// 點(diǎn)擊跳轉(zhuǎn)到下一頁
handleNext(){
this.$refs.swipeRef.next()
},
// 跳轉(zhuǎn)到指定頁
handleSwipeTo(){
//true 取消動(dòng)畫
this.$refs.swipeRef.swipeTo(1,{immediate:true})
}
},
created () {
this.getSwiperList()
}
}
</script>
<style lang="less" scoped>
.Swiper{
position: relative;
}
.my-swipe .van-swipe-item {
width: 37.5rem;
height: auto;
}
.my-swipe .van-swipe-item img {
width: 100%;
height: 100%;
}
.myIndicator{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -1rem;
color: #fff;
font-size: 1.6rem;
}
.prev,
.next{
font-size: 3rem;
color: #fff;
position: absolute;
top: 50%;
margin-top: -1.7rem;
}
.prev{
left: 1rem;
}
.next{
right: 1rem;
}
</style>
6.效果圖
效果圖
