问题：
swiper数量达到大约400+时候会出现明显滑动卡顿，渲染慢的问题，达到1000+时候需要几十秒时间，或者可能导致渲染失败。
解决方案：
配置circular="true"属性开启衔接滑动，即播放到末尾后重新回到开头。然后固定用于展示的swiper-item只设置3个，当滑动时候去替换展示的数据。这种方法可以展示几千万的数据展示都没问题。
//页面源码
<template>
<view class="content">
<view class="title">{{originIndex +1 }}/{{ originList.length }}</view>
<swiper class="swiper" circular @change="swiperChange" swiperDuration="250">
<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
<view class="wrap_content">{{ item }} </view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
originList: [], // 源数据
displaySwiperList: [], // swiper需要的数据
displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
originIndex: 0, // 记录源数据的下标
};
},
methods: {
/**
* 初始一个显示的swiper数据
* @originIndex 从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
*/
initSwiperData(originIndex = this.originIndex) {
const originListLength = this.originList.length; // 源数据长度
const displayList = [];
displayList[this.displayIndex] = this.originList[originIndex];
displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
this.originList[
originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
];
displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
this.originList[
originIndex + 1 == originListLength ? 0 : originIndex + 1
];
this.displaySwiperList = displayList;
},
/**
* swiper滑动时候
*/
swiperChange(event) {
const { current } = event.detail;
const originListLength = this.originList.length; // 源数据长度
// =============向后==========
if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
this.originIndex =
this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
this.initSwiperData(this.originIndex);
}
// ======如果两者的差为-2或者1则是向前滑动============
else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
this.initSwiperData(this.originIndex);
}
},
},
created() {
for (let i = 1; i <= 1300; i++) {
this.originList.push(i);
}
this.initSwiperData();
},
};
</script>
<style>
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60rpx;
}
.swiper {
height: calc(100vh - 120rpx);
}
.wrap_content {
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
background: gray;
height: 100vh;
color: aqua;
font-size: 80px;
margin: 0rpx 40rpx;
}
</style>
注意：
1、swiper-item的key一定要设置，并且用index。
<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
<view class="wrap_content">{{ item }} </view>
</swiper-item>
2、如果只有一张情况，不想让它来回滚动。可以设置circular，但是circular无法直接动态设置，我们可以使用computed来设置
<template>
<swiper :circular="!canCircular" > </swiper>
</template>
export default {
data() {
return {
originList:[]
}
},
computed: {
canCircular() {
return this.originList.length > 0; // 看这里重点
}
}
}
