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只有一张图片时，他也会单图自动滚动轮播，这是需要判断
网友评论