美文网首页uni
uni swiper卡顿长列表优化

uni swiper卡顿长列表优化

作者: litielongxx | 来源:发表于2021-11-17 22:39 被阅读0次

    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

    相关文章

      网友评论

        本文标题:uni swiper卡顿长列表优化

        本文链接:https://www.haomeiwen.com/subject/uumrtrtx.html