设置数组上下区间
先说我们遇到的需求：
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;
}
};本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录