做小程序的时候 使用到了 swiper, 大概15个 <swiper-item> 每个<swiper-item>中是一个展示列表大概100条数据.

发现滑动的时候非常的卡顿掉帧, 苹果手机稍微好点但是也掉帧.

我的解决方式是:

定义2个数组

第一个数组存放所有数据 allList

第二个数组 存放 15个空数组 用于 <swiper-item>循环 list: [[],[],[],[]...]

然后获取当前页 下一页: 当前页+1, 上一页:当前页-1

如果当前页的索引为 0 (说明是第一页) 则上一页为最后一页 = list.length -1

如果当前页的索引为 list.length-1 (说明是最后一页) 则下一页为第一页 = 0

这样判断, 就可以拿到了 上一页 当前页 下一页的索引

然后每次切换页面 动态改变list

{

list [上一页索引] = allList [上一页索引]

list [当前页索引] = allList [当前页索引]

list [下一页索引] = allList [下一页索引]

可选: 可以选择清空之前的数据 例如 清空上上页的数据 这样就可以一直维持 只有3个数组中有数据 swiper就不会卡顿了, 也可以保留达到缓存的效果

}

这样就每次渲染其实只有3个数组中有数据 别的 <swiper-item>为空 就会流畅很多

如果表达不清晰 见谅