<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