一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    设置数组上下区间

    技术 182 2022-10-04 18:00

    先说我们遇到的需求:

    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;
      }
    };
    


    文章评论

    评论列表(0