vue-awesome-swiper是基于swiper的，安裝不同版本的vue-awesome-swiper對應不同的swiper，所以swiper里面的屬性多數能應用到vue-awesome-swiper中，也可以根據swiper文檔來設置vue-awesome-swiper屬性；swiper官方文檔：https://www.swiper.com.cn/api/index2.html；在這里我使用的是，
1、安裝
npm?install??vue-awesome-swiper
cnpm inatall vue-awesome-swiper
2.引入
全局引入：
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'? //引入樣式
組件方式引入：
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
components: {
swiper,
swiperSlide
},
3.案例：
<template>
<div class="commodity">
<div class="container">
<swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0">
<swiper-slide v-for="(item, index) in commodity" data-index="index" :key="index" class="item">
<img class='swiImg' :src='item' />
</swiper-slide>
<div class="swiper-scrollbar"></div> //滾動條
<div class="swiper-button-next"></div> //下一頁
<div class="swiper-button-prev"></div> //上一頁
?<div class="swiper-pagination" v-for="(item,index) in detailimages" :key="index" slot="pagination"></div>?
</swiper>
<span class='swiText' v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
const that = this;
return {
commodity: [
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg"，
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg"，
https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg,
],這里就使用假數據了，
imgIndex: 1,
swiperOption: {
//是一個組件自有屬性，如果notNextTick設置為true，組件則不會通過NextTick來實例化swiper，也就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
notNextTick: true,
//循環
loop: true,
//設定初始化時slide的索引
initialSlide: 0,
//自動播放
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
},
//滑動速度
speed: 800,
//滑動方向
direction: "horizontal",
//小手掌抓取滑動
grabCursor: true,
//滑動之后回調函數
on: {
slideChangeTransitionStart: function() {
that.imgIndex = this.realIndex + 1;? //獲取輪播圖片下標索引；這里有一個坑，之前網上找到的是用activeIndex，但后來網上說的是這個realIndex，原來activeIndex是swiper2.0的；而realIndex是swiper3.0的，（使用realIndex才實現了下標索引）
},
},
//分頁器設置?
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets"
}
}
}
},
created() {
this.swiperOption.autoplay = this.commodity.length != 1 ? { //控制只有一張圖片的時候不自動輪播
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
} : false;
},
methods: {
}
}
</script>
<style lang="less" rel="stylesheet/less">
.commodity{
background: #f5f5f5;
.container{
position: relative;
.swiText {
position: absolute;
height: 0.5rem;
width: 0.5rem;
bottom: 0.2rem;
right: 0.3rem;
font-size: 0.33rem;
color: #fff;
z-index: 10;
}
.swiImgs {
width: 100%;
.item{
height: 7.5rem;
.swiImg {
width: 100%;
}
}
}
}
}
</style>
4.參數說明：
數 類型（swiper3） 默認值（swiper3） 類型（swiper4） 默認值（swiper4） 說明
autoplay Number/Boolean 0/false Object autoplay 自動切換
speed Number 300 Number 300 切換速度
loop Boolean false Boolean false loop模式
loopAdditionalSlides Number 0 Number 0 loop模式下會在slides前后復制若干個slide,，前后復制的個數不會大于原總個數。
loopedSlides Number 1 Number 1 在loop模式下使用slidesPerview:'auto',還需使用該參數設置所要用到的loop個數。
direction String horizontal String horizontal Slides的滑動方向
autoplayDisableOnInteraction Boolean true - - 用戶操作swiper之后，是否禁止autoplay
autoplayStopOnLast Boolean true - - 切換到最后一個slide時停止自動切換
grabCursor Boolean false Boolean false 鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
width Number - Number - 強制Swiper的寬度
height Number - Number - 強制Swiper的高度
autoHeight Boolean false Boolean false 自動高度
freeMode: ? ? ? ? swiper3/4 api相同
freeMode Boolean false - - free模式，slide會根據慣性滑動且不會貼合
freeModeMomentum Boolean true - - free模式動量。若設置為false則關閉動量，釋放slide之后立即停止不會滑動。
freeModeMomentumRatio Number 1 - - free模式動量值（移動慣量）
freeModeMomentumVelocityRatio Number 1 - - 動量反彈
freeModeMomentumBounce Boolean true - - Slides的滑動方向
freeModeMomentumBounceRatio Number 1 - - 值越大產生的邊界反彈效果越明顯，反彈距離越大。
freeModeSticky Boolean false - - 使得freeMode也能自動貼合。
effect: ? ? ? ? swiper3/4 api相同
effect String slide - - slide的切換效果。
fade/fadeEffect(4) Object fade - - fade效果參數。
cube/cubeEffect Object cube - - cube效果參數。
coverflow/coverflowEffect Object coverflow - - coverflow效果參數。
flip/flipEffect Object flip - - flip效果參數。
Zoom: ? ? ? ? ?
zoom Boolean false Object zoom 焦距功能：雙擊slide會放大，并且在手機端可雙指觸摸縮放。
zoomMax Number 3 - - 最大縮放焦距（放大倍率）.
zoomMin Number 1 - - 最小縮放焦距（縮小倍率）。
zoomToggle Boolean true - - 設置為false，不允許雙擊縮放，只允許手機端觸摸縮放。
pagination: ? ? ? ? ?
pagination String - Object pagination 分頁器容器的css選擇器或HTML標簽
paginationType String - - - bullets’ 圓點（默認）‘fraction’ 分式 ‘progress’ 進度條‘custom’ 自定義
paginationClickable Boolean false - - 點擊分頁器的指示點分頁器控制Swiper切換
paginationHide Boolean false - - 默認分頁器會一直顯示
paginationElement String span - - 設定分頁器指示器（小點）的HTML標簽。
Navigation Buttons: ? ? ? swiper4 navigation ?
nextButton string / HTMLElement - - - 前進按鈕的css選擇器或HTML元素。
prevtButton string / HTMLElement - - - 后退按鈕的css選擇器或HTML元素。
Scrollbar: ? ? ? ? ?
scrollbar string / HTMLElement - Object swiper4 Scrollbar Scrollbar容器的css選擇器或HTML元素
scrollbarHide Bolean true - - 滾動條是否自動隱藏。
scrollbarDraggable Boolean false - - 該參數設置為true時允許拖動滾動條。
scrollbarSnapOnRelease Boolean false - - 如果設置為true，釋放滾動條時slide自動貼合。
個別屬性聲明：
autoplay: {
delay: 1500,
stopOnLastSlide: false, //當切換到最后一個slide時是否自動停止切換，false：不停止；true:停止
disableOnInteraction: false, //用戶操作swiper之后，是否禁止autoplay。
reverseDirection: true, //開啟反向自動輪播。
waitForTransition: true //等待過渡完畢。自動切換會在slide過渡完畢后才開始計時。
},
fadeEffect: {
crossFade: false
},
cubeEffect: {
slideShadows: true, //開啟slide陰影。默認 true。
shadow: true, //開啟投影。默認 true。
shadowOffset: 100, //投影距離。默認 20，單位px。
shadowScale: 0.6 //投影縮放比例。默認0.94。
},
coverflowEffect: {
rotate: 30, //slide做3d旋轉時Y軸的旋轉角度。默認50。
stretch: 10, //每個slide之間的拉伸值，越大slide靠得越緊。 默認0。
depth: 60, //slide的位置深度。值越大z軸距離越遠，看起來越小。 默認100。
modifier: 2, //depth和rotate和stretch的倍率，相當于depth*modifier、rotate*modifier、stretch*modifier，值越大這三個參數的效果越明顯。默認1。
slideShadows: true //開啟slide陰影。默認 true。
},
flipEffect: {
slideShadows: true, //slides的陰影。默認true。
limitRotation: true //限制最大旋轉角度為180度，默認true。
},
zoom: {
maxRatio: 5, //最大倍數
minRatio: 2, //最小倍數
toggle: false, //不允許雙擊縮放，只允許手機端觸摸縮放。
containerClass: "my-zoom-container" //zoom container 類名
},
navigation: {
nextEl: ".swiper-button-next", //前進按鈕的css選擇器或HTML元素。
prevEl: ".swiper-button-prev", //后退按鈕的css選擇器或HTML元素。
hideOnClick: true, //點擊slide時顯示/隱藏按鈕
disabledClass: "my-button-disabled", //前進后退按鈕不可用時的類名。
hiddenClass: "my-button-hidden" //按鈕隱藏時的Class
},
pagination: {
el: ".swiper-pagination",
type: "bullets",
//type: 'fraction',
//type : 'progressbar',
//type : 'custom',
progressbarOpposite: true, //使進度條分頁器與Swiper的direction參數相反
bulletElement: "li", //設定分頁器指示器（小點）的HTML標簽。
dynamicBullets: true, //動態分頁器，當你的slide很多時，開啟后，分頁器小點的數量會部分隱藏。
dynamicMainBullets: 2, //動態分頁器的主指示點的數量
hideOnClick: true, //默認分頁器會一直顯示。這個選項設置為true時點擊Swiper會隱藏/顯示分頁器。
clickable: true //此參數設置為true時，點擊分頁器的指示點分頁器會控制Swiper切換。
},
scrollbar: {
el: ".swiper-scrollbar",
hide: true, //滾動條是否自動隱藏。默認：false，不會自動隱藏。
draggable: true, //該參數設置為true時允許拖動滾動條。
snapOnRelease: true, //如果設置為false，釋放滾動條時slide不會自動貼合。
dragSize: 30 //設置滾動條指示的尺寸。默認'auto': 自動，或者設置num(px)。
},
// 如果自行設計了插件，那么插件的一些配置相關參數，也應該出現在這個對象中，如下debugger
debugger: true,
//autoplay: 3000,
slidesPerView: "auto",//設置slider容器能夠同時顯示的slides數量(carousel模式)。可以設置為數字（可為小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量。loop模式下如果設置為'auto'還需要設置另外一個參數loopedSlides。
centeredSlides: true,//<span style="color:rgb(68,68,68);font-family:'microsoft yahei';font-size:13px;">設定為true時，活動塊會居中，而不是默認狀態下的居左。</span>
大概就是這些了，上面也有一個案例，有興趣的可以去體驗下；
注釋：這里遇到了幾個問題，這里跟大家說下：
1.當使用真實數據渲染的時候，分頁器不顯示，和滾動到最后一張停止：原因是因為this.commodity剛開始數據為[],后來賦值才有值，所以要先判斷this.commodity是否為空
2.上面提到的獲取輪播圖片的下標索引，記得使用this.realIndex
3.當this.commodity只有一張圖片時，他也會單圖自動滾動輪播，這是需要判斷
