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對象的數組,調用方法時需對數組中每一項單獨調用