<template>
<div>
<swiper :options="
swiperOption" v-if="adverList.length" ref="mySwiper" class="height-380">
<swiper-slide v-for="item in adverList" :key="item.id" class="height-380">
<img
:src="item.photoVal ? item.photoVal : require('../../assets/img/placeholder.jpg')"
class="height-380 img-cover"
/>
</swiper-slide>
<!-- 分頁器指示點顯示和樣式 -->
<div class="
swiper-pagination" slot="
pagination" v-show="adverList.length > 1"></div>
</swiper>
<div class="
swiper-button-prev">上一頁</div>
<div class="
swiper-button-next">下一頁</div>
</div>
</template>
data () { let _this = this; return { swiperOption: { speed: 1000, // 切換速度 autoplay: { // 自動播放 delay: 3000, //自動播放開始時間 disableOnInteraction: false }, loop: true, //循環切換 grabCursor: true, //設置為true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀 pagination: { el: '.swiper-pagination', // type : 'progressbar', //分頁器形狀 clickable: true, //點擊分頁器的指示點分頁器會控制Swiper切換 },
navigation: {
nextEl: "
.swiper-button-next", //前進按鈕的css選擇器或HTML元素。
prevEl: "
.swiper-button-prev", //后退按鈕的css選擇器或HTML元素。
},
observer: true,//修改swiper自己或子元素時，自動初始化swiper observeParents: true,//修改swiper的父元素時，自動初始化swiper, on: { click: function () { // 監聽點擊滑塊事件
// this.realIndex是當前swpier 實例的對象屬性
console.log(this.realIndex); // 當前滑塊索引 } } }, } },
1、安裝
npm install vue-awesome-swiper
cnpm inatall vue-awesome-swiper
2、引入
main.js全局引入：
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
}
4.參數說明：
個別屬性聲明：
options: { 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)。 }, }
大概就是這些了，上面也有一個案例，有興趣的可以去體驗下；
注釋：這里遇到了幾個問題，這里跟大家說下：
1.當使用真實數據渲染的時候，分頁器不顯示，和滾動到最后一張停止：原因是因為this.commodity剛開始數據為[],后來賦值才有值，所以要先判斷this.commodity是否為空
2.上面提到的獲取輪播圖片的下標索引，記得使用this.realIndex
3.當this.commodity只有一張圖片時，他也會單圖自動滾動輪播，這是需要判斷
本文轉載自：https://blog.csdn.net/dwb123456123456/java/article/details/82701740