在做移動(dòng)端網(wǎng)頁的時(shí)候美尸，用mint-ui做輪播圖罩锐，總是出現(xiàn)卡頓猜丹，于是想用swiper插件，搜了一下方法在vue里用這個(gè)真的是賊麻煩央渣，然后看到適用于vue的vue-awesome-swiper插件计盒，下面是其使用方法及實(shí)例：
1.?安裝vue-awesome-swiper：npm install vue-awesome-swiper --save
2.安裝less-loader 和?css-loader，這兩項(xiàng)是該插件的依賴：
?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)
然后就可以在組件里使用了：比如有個(gè)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設(shè)置為true拔第，組件則不會(huì)通過NextTick來實(shí)例化swiper咕村，就意味著你可以在第一時(shí)間獲取到swiper對(duì)象，假如你需要?jiǎng)偧虞d遍使用獲取swiper對(duì)象來做什么事蚊俺，那么這個(gè)屬性一定要是true
pagination:{? ? //分頁器相關(guān)設(shè)置都寫在這個(gè)對(duì)象里懈涛，剛開始寫錯(cuò)了寫在外面，怎么點(diǎn)擊都不切換- -|||
????el:'.swiper-pagination',
????clickable :true,
},
autoplay: true,
loop:true,? ? ? ? ?//循環(huán)播放
onSlideChangeEnd:swiper=>{? ? ? ? ? ?//這里放swiper的回調(diào)方法
????this.index = swiper.realIndex;
}
}
}
},
computed:{
swiper(){
return this.$refs.mySwiper.swiper;? ? ?// 獲取當(dāng)前的swiper對(duì)象泳猬，同時(shí)notNextTick必須為true
}
},
/* mounted(){? ? ? ? ? ? //這里就可以使用swiper對(duì)象去調(diào)用swiper官網(wǎng)中的方法了
var that = this;
setInterval(function(){? ? ?//自動(dòng)播放 ,不設(shè)置這個(gè)設(shè)置autoplay為true也可以
that.swiper.slideNext() },2000) }? ? ? //剛開始弄的時(shí)候autoplay不起作用批钠，現(xiàn)在又好了，所以注釋了
*/
}
</script>
//現(xiàn)在就可以使用swiper官網(wǎng)里的方法和組件啦得封， swiper官網(wǎng)http://www.swiper.com.cn/api/autoplay/16.html
//蛋疼的編輯器价匠，我的縮進(jìn)都沒了，不想放截圖呛每，html標(biāo)簽還不能粘貼踩窖，怎么設(shè)置才可以粘貼啊晨横？
<style>
.swiperBox .slides{ height: 200px; } .swiperBox img{ height: 200px; }
<style>
? ?最后提供一下? ?vue-awesome-swiper 官方安裝地址：https://www.npmjs.com/package/vue-awesome-swiper
