uni swiper卡顿长列表优化
2021-11-17 本文已影响0人
litielongxx
uni的swiper官方不建议渲染太多,只用作渲染少量轮播图用。
大致数量在50左右会明显卡顿半秒左右,1百多明显超过1秒,三四百则会三四秒很正常。关键词类似长列表优化
侧滑的场景,比如题库左右切换有的成百上千,抖音之类的卡片切换都会存在,已有解决方案参考站内。
原文参考下方:
1 使用注意
<swiper circular :current="swiperIndex" @animationfinish="animationfinish">
<swiper-item wx:for="{{displayList}}" wx:key="index" >
<view>{{item}}</view>
</swiper-item>
</swiper>
// circular作为原生小程序或uni的组件,这次实现circular必不可少(左右边无缝滑动)
2 methods中方法,注意
curindex list对应的数据
swiperIndex 轮播图索引一直0/1/2循环 (是长列表swiper中优化只显示上一张当前下一张)
...
animationfinish(e) {
let current = e.detail.current;
this.changeList(current)
},
upDateDisplayList(){
this.displayList = [];
this.displayList[this.swiperIndex] = this.allQue[this.curIndex];
this.displayList[this.swiperIndex-1 == -1 ? 2:this.swiperIndex-1] = this.allQue[this.curIndex-1 == -1 ? this.allQue.length-1 : this.curIndex -1];
this.displayList[this.swiperIndex+1 == 3 ? 0:this.swiperIndex+1]= this.allQue[this.curIndex+1 == this.allQue.length ? 0 : this.curIndex+1];
this.updateVideoUrl();
},
changeList(current) {
console.log('改变swiper长度')
if(this.swiperIndex-current==2 || this.swiperIndex-current==-1){
this.curIndex = this.curIndex + 1 == this.allQue.length ? 0 : this.curIndex + 1;
this.swiperIndex = this.swiperIndex + 1 == 3 ? 0 : this.swiperIndex + 1;
this.upDateDisplayList();
console.log('后滑',this.swiperIndex,this.curIndex)
}// 如果两者的差为-2或者1则是向前滑动
else if(this.swiperIndex-current==-2 || this.swiperIndex-current==1) {
this.curIndex = this.curIndex - 1 == -1 ? this.allQue.length-1 : this.curIndex - 1;
this.swiperIndex = this.swiperIndex-1 == -1 ? 2 : this.swiperIndex - 1;
this.upDateDisplayList();
console.log('前滑',this.swiperIndex,this.curIndex)
}
},
初始化
//onload中直接执行
this.upDateDisplayList()