在做移動端網頁的時候，用mint-ui做輪播圖，總是出現卡頓，于是想用swiper插件，搜了一下方法在vue里用這個真的是賊麻煩，然后看到適用于vue的vue-awesome-swiper插件，下面是其使用方法及實例：
1.?安裝vue-awesome-swiper：npm install vue-awesome-swiper --save
2.安裝less-loader 和?css-loader，這兩項是該插件的依賴：
?npm install less less-loader --save
?npm???install css-loader --save
安裝好后，修改build\webpack.base.conf.js文件，添加下面代碼? { test: /\.less$/,? loader: 'style-loader!css-loader!less-loader'? ?}
3.在main.js引入 vue-awesome-swiper ：
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
然后就可以在組件里使用了：比如有個Banner組件，以下是示例：
<template>
<div class="swiperBox">
????????<swiper :options="swiperOption" ref="mySwiper">
????????????<swiper-slide class="slides"><img src="static/01.jpg"></swiper-slide>
????????????<swiper-slide class="slides"><img src="static/02.jpg"></swiper-slide>
????????????<div class="swiper-pagination" slot="pagination"></div>? ?<!-------分頁---------->
????</swiper>
<div>
</template>
<script >
import { swiper, swiperSlide } from 'vue-awesome-swiper'? ? //必須引入
export default{
name:'m-banner',
components: { swiper, swiperSlide },? ?//也是必須的了
data(){
return {
swiperOption: {
notNextTick: true,? ?// notNextTick設置為true，組件則不會通過NextTick來實例化swiper，就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
pagination:{? ? //分頁器相關設置都寫在這個對象里，剛開始寫錯了寫在外面，怎么點擊都不切換- -|||
????el:'.swiper-pagination',
????clickable :true,
},
autoplay: true,
loop:true,? ? ? ? ?//循環播放
onSlideChangeEnd:swiper=>{? ? ? ? ? ?//這里放swiper的回調方法
????this.index = swiper.realIndex;
}
}
}
},
computed:{
swiper(){
return this.$refs.mySwiper.swiper;? ? ?// 獲取當前的swiper對象，同時notNextTick必須為true
}
},
/* mounted(){? ? ? ? ? ? //這里就可以使用swiper對象去調用swiper官網中的方法了
var that = this;
setInterval(function(){? ? ?//自動播放 ,不設置這個設置autoplay為true也可以
that.swiper.slideNext() },2000) }? ? ? //剛開始弄的時候autoplay不起作用，現在又好了，所以注釋了
*/
}
</script>
//現在就可以使用swiper官網里的方法和組件啦， swiper官網http://www.swiper.com.cn/api/autoplay/16.html
//蛋疼的編輯器，我的縮進都沒了，不想放截圖，html標簽還不能粘貼，怎么設置才可以粘貼啊？
<style>
.swiperBox .slides{ height: 200px; } .swiperBox img{ height: 200px; }
<style>
? ?最后提供一下? ?vue-awesome-swiper 官方安裝地址：https://www.npmjs.com/package/vue-awesome-swiper
