在开发小程序时，我们经常会用到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();
}
},
})
