微信小程序 解决swiper数量多导致渲染卡顿的解决方案

  在开发小程序时，我们经常会用到swiper组件实现轮播或者翻页效果，但是当swiper-item数量过多时，会造成视图层渲染卡顿的问题。

  有网友推荐的做法是只渲染三个swiper-item，分别是本条数据以及上一条和下一条，默认当前显示的swiper-item位置是中间那个，然后根据滑动动态更改三条数据，并把current位置设置回中间那个swiper-item，也就是current:1, 但是这种做法会在setData({current:1})时有个往回滑动的动画效果，这里也有个简单粗暴的解决办法就是通过设置duration='0'直接关闭动画，但不管怎样做，体验都是相对较差的。

   还有的网友的做法是先渲染n个空的swiper-item，n是当前数据的条数，然后只插入当前索引以及上下两条数据，并根据滑动动态修改对应位置的数据，这种做法比上一种更简单，优化了性能，也解决了翻页会有往回滑动动画的问题，但是当swiper-item量足够大时，比如1000条，渲染仍会非常卡顿。

个人认为最佳的解决办法是对第一种解决方案进行改进：

1. 同样的是只在视图层渲染三个swiper-item，其它的数据存在数组中
2. 在swiper组件中加入circular属性，使swiper可以衔接滑动
3. 然后swiper中当前显示swiper-item的索引也是动态的，数据需要根据当前索引更新到对应位置，并不是直接将current固定在第二条，结合circular属性，就可以实现只渲染了三条swiper-item并且滑动无跳回，并解决了swiper数量过多导致渲染卡顿的问题。

现实的效果图：

gif效果图

直接说可能不太清晰，下面直接上代码

首先是wxml：

 ​
 <swiper circular bindchange="onSwiperChange">
 ​
   <swiper-item wx:for="{{displayList}}" wx:key="index">
 ​
     <view>{{item}}</view>
 ​
   </swiper-item>
 ​
 </swiper>
 ​

js：

 ​
 // 假设这是要渲染到swiper-item的数据
 ​
 let list = [1,2,3,4,5,6,7,8,9,10];
 ​
 // 这是当前swiper-item在list中的索引
 ​
 let index = 0;
 ​
 // 这是当前swiper-item在swiper中的索引
 ​
 let currentIndex = 0;
 ​
 Page({
 ​
   data: {
 ​
     // 要渲染到swiper-item的数组
 ​
     displayList:[],
 ​
   },
 ​
   onLoad() {
 ​
     this.upDateDisplayList();
 ​
   },
 ​
   // 更新当前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){
 ​
     // 先判断是向前滑动还是向后滑动
 ​
     // current 为滑动后swiper-item的索引
 ​
     let current = e.detail.current
 ​
     // currentIndex是滑动前swiper-item的索引
 ​
     // 如果两者的差为2或者-1则是向后滑动
 ​
     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则是向前滑动
 ​
     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();
 ​
     }
 ​
   },
 ​
 })
 ​

 

如果大家有更好的解决方案，也欢迎一起讨论学习 ！