第一步 安裝
進(jìn)入項(xiàng)目目錄 執(zhí)行 cnpm/npm install vue-awesome-swiper 進(jìn)行安裝 需要注意的是css-loader和less-loader也需要安裝 否則樣式無法正常使用
第二步 調(diào)用
在main.js里添加如下代碼
import VueAwesomeSwiper from 'vue-awesome-swiper' //引入插件
require('swiper/dist/css/swiper.css') //引入css 其他地方都沒有寫這一句 但是在實(shí)際操作中 這句話不能少
Vue.use(VueAwesomeSwiper) //調(diào)用插件
第三步 使用
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(img,index) in imgs":key="index" >
<a class="fd_slide"><img :src="img.url"></a>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<script>
import Vue from 'vue'
import { swiper, swiperSlide, swiperPlugins } from 'vue-awesome-swiper'
export default{
components: {
swiper,
swiperSlide
},
data(){
return {
swiperOption: {
initialSlide:0,//設(shè)定初始化時(shí)slide的索引
direction:'horizontal',//Slides的滑動方向,可設(shè)置水平(horizontal)或垂直(vertical)悲敷。
loop: true, //無限滾動
speed:300, //滑動速度
pagination: '.swiper-pagination', //分頁器
paginationClickable: true,
autoplay: 2500,
onSlideChangeEnd: swiper => { //滑動之后回調(diào)函數(shù)
console.log('onSlideChangeEnd', swiper.realIndex) //切換結(jié)束時(shí)虹钮,告訴我現(xiàn)在是第幾個(gè)slide
}
},
imgs:[
{ url:'http://xxx/ban_02.jpg' },
{ url:'http://xxx/ban_04.jpg' },
{ url:'http://xxx/ban_08.jpg' },
]
}
},
}
</script>
4 修改
毫無疑問這個(gè)插件是很好用的 但是再好的組件也不能滿足用戶的所有要求 這款插件專注于功能 對于樣式上的問題并沒有給出太多方案
我做項(xiàng)目時(shí) 輪播圖的分頁器樣式不是我要的 我在網(wǎng)上一直查找沒有找到好的辦法 索性就直接去改了插件里的樣式 也就是剛開始引用的這個(gè)swiper.css 這種方法算是很粗暴的了 而且說實(shí)話我個(gè)人并不推薦使用這種方法 但是我目前沒有好的辦法 希望有大神知道的話可以提出好的意見
以上內(nèi)容就是我在實(shí)際開發(fā)中結(jié)合前人的經(jīng)驗(yàn)總結(jié)出來的 有任何問題歡迎大家指正 謝謝