Swiper
开始
安装
npm install swiper vue-awesome-swiper --save
swiper 是corejs，常用版本 swiper4 与 swiper6，最新版本 swiper7
vue-awesome-swiper 是 swiper 的Vue组件（swiper6 开始，swiper 集成了各框架组件能力以取代 vue-awesome-swiper）
swiper 与 vue-awesome-swiper版本
-
Swiper 5-6 vue-awesome-swiper@4.1.1 (vue2) 稳定版本6.8.4
-
Swiper 4.x vue-awesome-swiper@3.1.3 (vue2) 稳定版本4.5.1
-
Swiper 3.x vue-awesome-swiper@2.6.7 (vue2) 稳定版本3.4.2
引用
全局引用
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(
VueAwesomeSwiper,
{ ... } // default options with global component
)
局部引用
import "swiper/swiper-bundle.css";
import SwiperCore, { Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
SwiperCore.use([Autoplay]);
<swiper :options="swiperOptions">
<swiper-slide v-for="(item, index) in 6" :key="index">
<div class="prize-box fs-0">
<img class="prize-pic" :src="require(`@img/prize-pool/prize_${index}.png`)"
/>
</div>
</swiper-slide>
</swiper>
this.swiperOptions = {
direction: "horizontal",
loop: true,
slidesPerView: 4,
centeredSlides: true,
loopAdditionalSlides: 2,
spaceBetween: 20,
observer: true,
freeMode: true,
freeModeSticky: true,
freeModeMomentumRatio: 0,
freeModeMomentumVelocityRatio: 0.1,
autoplay: { delay: 2500, disableOnInteraction: false }
};
自定义插件(plugins)
import Vue from 'vue'
// 1. 引入插件
// Swiper 5.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/js/swiper.esm'
// Swiper 6.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
// 2. 插件增强Swiper modules
SwiperClass.use([Pagination, Mousewheel, Autoplay])
// -------------------------------------------------
// Global use使用
Vue.use(getAwesomeSwiper(SwiperClass))
// Or local component使用
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
export default {
components: {
Swiper,
SwiperSlide
}
}
参数
基本参数
initialSlide： 初始 slide 的索引
slidesPerView： slider容器单屏显示item数量
centeredSlides： 设置为true后active slide起始位置为中间
默认false状态下的居左。常配合 slidePreView 使用；
slidesPerView： 设置slides数量计算出slide宽度
当数量值为 auto 即slide宽度为内容宽度；
spaceBetween： slide间距
数字类型以px为单位，百分比字符串基于 swiper-container
resistanceRatio： 拖动至最左/最右的弹性，0即不可回弹
自由模式
freeMode： 自由滑动模式
默认 false 关闭；开启后，允许惯性滚动，拖动过程中判断位置实时触发多次 swiperchange；
freeModeSticky： 为 true 则 freeMode 也能自动贴合；
freeModeMomentumRatio： free模式动量值（移动惯量）
默认为1(s)，即释放slide后滑动计算长度所花费时间。值越大，滑动时长越长，滑动距离也会变长；
freeModeMomentumVelocityRatio： free模式惯性速度
默认为1；设置越大，释放后滑得越快。
循环
loopAdditionalSlides： loop模式下，前后复制的swiper-item数
默认值为0，即复制1个；在循环滚动时，如果出现滚动到最左/右，下一循环未显示，则可通过设置改值多复制几份即可；
案例
垂直滑动
direction: 'vertical',
freeMode: true,
slidesPerView: 'auto',
resistanceRatio: 0 // 边缘抵抗率
单屏多个Slide
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: '1.8%',
问题
点击事件
loop下点击失效
loop循环下会复制slide节点，绑定slide下事件不会作用于复制节点上，导致事件失效情况；
解决： 通过有初始化参数options的事件相关配置项绑定事件，传值通过 data-set 或 realIndex 计算；
slide展示
单屏显示多项
单屏显示scale缩放后slide的间距不统一；
解决： 让 swiper-item 的内容绝对定位居中或设置 transform-origin
滑动闪白
ios移动端滑动闪白
解决：.swiper-container 添加 transform: translateZ(0);
或 .swiper-slide 添加 transform: translate3d(0, 0, 0);
