在開(kāi)發(fā)小程序時(shí)善玫，我們經(jīng)常會(huì)用到swiper組件實(shí)現(xiàn)輪播或者翻頁(yè)效果官硝，但是當(dāng)swiper-item數(shù)量過(guò)多時(shí)龄恋，會(huì)造成視圖層渲染卡頓的問(wèn)題。
有網(wǎng)友推薦的做法是只渲染三個(gè)swiper-item阀趴，分別是本條數(shù)據(jù)以及上一條和下一條昏翰，默認(rèn)當(dāng)前顯示的swiper-item位置是中間那個(gè)，然后根據(jù)滑動(dòng)動(dòng)態(tài)更改三條數(shù)據(jù)刘急，并把current位置設(shè)置回中間那個(gè)swiper-item棚菊，也就是current:1, 但是這種做法會(huì)在setData({current:1})時(shí)有個(gè)往回滑動(dòng)的動(dòng)畫(huà)效果，這里也有個(gè)簡(jiǎn)單粗暴的解決辦法就是通過(guò)設(shè)置duration='0'直接關(guān)閉動(dòng)畫(huà)叔汁，但不管怎樣做窍株，體驗(yàn)都是相對(duì)較差的。
還有的網(wǎng)友的做法是先渲染n個(gè)空的swiper-item攻柠，n是當(dāng)前數(shù)據(jù)的條數(shù)，然后只插入當(dāng)前索引以及上下兩條數(shù)據(jù)后裸，并根據(jù)滑動(dòng)動(dòng)態(tài)修改對(duì)應(yīng)位置的數(shù)據(jù)瑰钮，這種做法比上一種更簡(jiǎn)單，優(yōu)化了性能微驶，也解決了翻頁(yè)會(huì)有往回滑動(dòng)動(dòng)畫(huà)的問(wèn)題浪谴，但是當(dāng)swiper-item量足夠大時(shí)开睡，比如1000條，渲染仍會(huì)非彻冻埽卡頓篇恒。
個(gè)人認(rèn)為最佳的解決辦法是對(duì)第一種解決方案進(jìn)行改進(jìn)：
1、同樣的是只在視圖層渲染三個(gè)swiper-item凶杖，其它的數(shù)據(jù)存在數(shù)組中
2胁艰、在swiper組件中加入circular屬性，使swiper可以銜接滑動(dòng)
3智蝠、然后swiper中當(dāng)前顯示swiper-item的索引也是動(dòng)態(tài)的腾么，數(shù)據(jù)需要根據(jù)當(dāng)前索引更新到對(duì)應(yīng)位置，并不是直接將current固定在第二條杈湾，結(jié)合circular屬性解虱，就可以實(shí)現(xiàn)只渲染了三條swiper-item并且滑動(dòng)無(wú)跳回，并解決了swiper數(shù)量過(guò)多導(dǎo)致渲染卡頓的問(wèn)題漆撞。
現(xiàn)實(shí)的效果圖：
直接說(shuō)可能不太清晰殴泰，下面直接上代碼
首先是wxml：
<swiper circular bindchange="onSwiperChange">
<swiper-item wx:for="{{displayList}}" wx:key="index">
<view>{{item}}</view>
</swiper-item>
</swiper>
js：
// 假設(shè)這是要渲染到swiper-item的數(shù)據(jù)
let list = [1,2,3,4,5,6,7,8,9,10];
// 這是當(dāng)前swiper-item在list中的索引
let index = 0;
// 這是當(dāng)前swiper-item在swiper中的索引
let currentIndex = 0;
Page({
data: {
// 要渲染到swiper-item的數(shù)組
displayList:[],
},
onLoad() {
this.upDateDisplayList();
},
// 更新當(dāng)前displayList
upDateDisplayList(){
let displayList = [];
displayList[currentIndex] = list[index];
displayList[currentIndex-1 == -1 ? 2:currentIndex-1] = list[index-1 == -1 ? list.length-1 : index -1];
displayList[currentIndex+1 == 3 ? 0:currentIndex+1]= list[index+1 == list.length ? 0 : index+1];
this.setData({
displayList,
})
},
onSwiperChange(e){
// 先判斷是向前滑動(dòng)還是向后滑動(dòng)
// current 為滑動(dòng)后swiper-item的索引
let current = e.detail.current
// currentIndex是滑動(dòng)前swiper-item的索引
// 如果兩者的差為2或者-1則是向后滑動(dòng)
if(currentIndex-current==2 || currentIndex-current==-1){
index = index + 1 == list.length ? 0 : index + 1;
currentIndex = currentIndex + 1 == 3 ? 0 : currentIndex + 1;
this.upDateDisplayList();
}
// 如果兩者的差為-2或者1則是向前滑動(dòng)
else if(currentIndex-current==-2 || currentIndex-current==1) {
index = index - 1 == -1 ? list.length-1 : index - 1;
currentIndex = currentIndex-1 == -1 ? 2 : currentIndex - 1;
this.upDateDisplayList();
}
},
})
