Vue-Awesome-Swiper
关闭auto-update可以防止页面其他部分dom变化引起swiper重绘导致的卡顿
<!-- All events/props support camelCase or kebab-case. -->
<swiper
:options="swiperOptionsObject"
:auto-update="true"
:auto-destroy="true"
:delete-instance-on-destroy="true"
:cleanup-styles-on-destroy="true"
@ready="handleSwiperReadied"
@click-slide="handleClickSlide"
/>
<!-- vue-awesome-swiper converts all Swiper events into component/directive events, e.g.: -->
<swiper
@slide-change-transition-start="onSwiperSlideChangeTransitionStart"
@slideChangeTransitionStart="onSwiperSlideChangeTransitionStart"
@slideChangeTransitionEnd="..."
@transitionStart="..."
...
/>
使用virtual解决性能问题
- 虚拟Slide会在Dom结构中保持尽量少的Slide，只渲染当前可见的slide和前后的slide，而隐藏其他不可见的Slide，每次切换时就渲染新的Slide。
- vue-awesome-swiper暂不支持该特性
在vue、react中可使用renderExternal并在html中填写swiper-slide。否则swiper-wrapper内应为空，通过renderSlide定义内容。
<template>
<!-- ... -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 必须在每个slide上设置left -->
<!-- 勿直接将v-for的index做为key，会出现key重复的问题 -->
<div class="swiper-slide"
v-for="(slide, index) in virtualData.slides"
:key="slide.id"
:style="{left: `${virtualData.offset}px`}"
>
{{curIndex}}
<br/>
{{slide}}
</div>
</div>
</div>
<!-- ... -->
</template>
<script>
import Swiper from 'swiper/dist/js/swiper.esm.bundle' // 导入swiper
import 'swiper/dist/css/swiper.min.css' // 记得导入样式
export default {
data() {
return {
curIndex:0, // 当前翻页索引
// 声明virtualData，供swiper使用
virtualData: {
slides: [],
},
}
},
mounted() {
Api.getSomeSlides().then(res=>{
const _this = this;
const swiper = new Swiper('.swiper-container', {
// ...
virtual: {
slides: res.slides, // 需要添加的虚拟slide的内容
renderExternal(data) {
console.log(data)
// 返回一个经过swiper计算后的当前需要渲染的slides相关信息
// offset - slides偏移值
// from - 首个需要渲染的slide索引
// to - 最后一个需要渲染的slide索引
// slides - 需要渲染的slides
_this.virtualData = data
},
},
on:{
slideChange(){
// 更新index
_this.curIndex=this.activeIndex
}
}
});
})
},
};
</script>
边上露出一部分下个slide
给 swiper-container 加一个padding
左滑删除小demo
mySwiper = new Swiper('.swiper-container', {
// slidesPerView:2,
slidesPerView: 'auto', //网格布置时,若各个大小不同,需加该属性
resistanceRatio: 0, //到底时禁止继续拖动
touchRatio: 0.5,//实际滚动的距离为用户touchmove距离的一半
onTransitionStart: function(swiper) {
if (swiper.progress == 1) {
$scope.slideBack();//如果一个左滑,其他的都复位
}
}
})
//同一次new可以对所有目标生成一个Swiper对象,如果符合条件的只有一个,则mySwiper是一个对象,
//如果不止一个,则mySwiper是一个Swiper对象的数组,调用方法时需对数组中每一项单独调用
