swiper组件(轮播)每次需要,提前放很多张照片,
如果数据源一直都在递增,
那么就需要对这组照片进行区间优化
场景就是:一个图片列表页面,
点击其中一张图片时,跳转到新的页面,
并且传递已经渲染的全部图片,放入轮播图组件中,
数据少的时候,是没有性能问题的,
如果我们的列表是下拉加载的,那么我们需要传递的图片数组,就会无限递增,
导致性能出现问题。
每次根据用户点击的那一张图片的索引的上下区间50,这个50可以自己设置,就是最大的照片数量,
进行分割,举例:
我们有10张照片,用户点击了第二张,假设我们上下区间为1张 也就是当前索引+-1,最大数为3
我们想要的结果 当前索引2,+1是3 -1是1,输出1,2,3
再举个以上条件不变,我们点击了第5张,
输出结果就是4,5,6
这就是我们想要的节流区间。
我已经封装好了方法,也做了一些临界值的处理。
export const limitSwiperImgs = (
activePaper,
papers,
newPapersMaxLength = 50
) => {
let newPapers = [];
let activePaperIndex = papers.findIndex(
(papper) => papper._id === activePaper._id
);
if (papers.length < newPapersMaxLength) {
return papers;
} else {
let startIndex = activePaperIndex - newPapersMaxLength / 2;
if (startIndex < 0) {
startIndex = 0;
endIndex = newPapersMaxLength;
}
let endIndex = activePaperIndex + newPapersMaxLength / 2;
if (endIndex > papers.length) {
endIndex = papers.length;
startIndex = endIndex - newPapersMaxLength;
}
for (let i = startIndex; i < endIndex; i++) {
let item = papers[i];
newPapers.push(item);
}
return newPapers;
}
};