問題：
swiper數(shù)量達到大約400+時候會出現(xiàn)明顯滑動卡頓呵哨，渲染慢的問題赁濒，達到1000+時候需要幾十秒時間，或者可能導致渲染失敗孟害。
解決方案：
配置circular="true"屬性開啟銜接滑動拒炎，即播放到末尾后重新回到開頭。然后固定用于展示的swiper-item只設置3個挨务，當滑動時候去替換展示的數(shù)據(jù)击你。這種方法可以展示幾千萬的數(shù)據(jù)展示都沒問題。
//頁面源碼
<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: [], // 源數(shù)據(jù)
displaySwiperList: [], // swiper需要的數(shù)據(jù)
displayIndex: 0, // 用于顯示swiper的真正的下標數(shù)值只有：0谎柄，1丁侄，2。
originIndex: 0, // 記錄源數(shù)據(jù)的下標
};
},
methods: {
/**
* 初始一個顯示的swiper數(shù)據(jù)
* @originIndex 從源數(shù)據(jù)的哪個開始顯示默認0朝巫，如從其他頁面跳轉(zhuǎn)進來鸿摇，要顯示第n個，這個參數(shù)就是他的下標
*/
initSwiperData(originIndex = this.originIndex) {
const originListLength = this.originList.length; // 源數(shù)據(jù)長度
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; // 源數(shù)據(jù)長度
// =============向后==========
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無法直接動態(tài)設置，我們可以使用computed來設置
<template>
<swiper :circular="!canCircular" > </swiper>
</template>
export default {
data() {
return {
originList:[]
}
},
computed: {
canCircular() {
return this.originList.length > 0; // 看這里重點
}
}
}
