uni

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()

【参考资料】https://www.jianshu.com/p/b8841a8b7417

上一篇下一篇

猜你喜欢

热点阅读