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对象的数组,调用方法时需对数组中每一项单独调用