使用数组生成swiper时，更新数组数据会卡顿

[eXl5]

   现将一个imgList创建成一个swiper，因为原list长度很长，影响加载速度，所以每次点击swiper的下一页就取出部分数据并拼接于tempImageList，但是发现向tempImageList中放入数据时，swiper的滑动会有卡顿

代码如下

<template>
    <swiper-slide v-for="(slide, index) in tempImageList" :key="index">
    <div>
        <span  :style="{backgroundImage: 'url(' + noItemImage + ')' }"></span>
    </div>
    </swiper-slide>
</template>

swiperOption: {
    slidesPerView: 3,
    spaceBetween: 10,
    slidesPerGroup: 3,
    on: {
        slideChange: () => {
            let swiper = this.$refs.mySwiper.swiper;
            if (swiper.activeIndex === 0) {
            this.slidePreBtnAvailable = false;
            }else {
                this.slidePreBtnAvailable = true;
            }
           if((swiper.activeIndex === this.currentImageList.length - 3) && (this.currentImageList.length < this.currentRecord.pictureTotal)){
            this.currentPage++;
            }
            if ((swiper.activeIndex === this.currentImageList.length - 3) && (this.currentImageList.length = this.currentRecord.pictureTotal)){
                this.slideNextBtnAvailable = false;
            }else{
                this.slideNextBtnAvailable = true;
            }
        }
    }
}

currentImageList(){
    let tempObj = JSON.parse(JSON.stringify(this.currentRecord));
    let start = (this.currentPage - 1) * this.pageSize;
    let offset = this.pageSize;
    let imageList = [];
    let concatList = [];
    if (tempObj && (tempObj.imgList instanceof Array) && tempObj.imgList.length) {
        imageList = tempObj.imgList.slice(start, start + offset);
        concatList = this.tempImageList.concat(imageList);
        this.tempImageList = concatList;
        return concatList;
    } else {
        return [];
    }
}

[eXl5]

版本 "vue": "^2.5.2", "vue-awesome-swiper": "^3.1.3",

[surmon-china]

建议：使用 virtual slides。

[surmon-china]

@eXl5

若交互/点击事件不好实现，可参照使用 @click-slide，支持 loop。