可以无限循环的按钮组件

最新推荐文章于 2024-07-08 18:01:35 发布

Daemon.

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量152

点赞数

分类专栏： html css 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/weixin_44927516/article/details/128970440

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

前两天做了一个项目，由于页面底部的按钮过多，所以决定给他们加个按钮。我想了想，决定给它做成循环的(可以一直点击的那种)。但是后来产品经理告诉我一直点不到头，想换成正常的。
我是用React+TS去实现的，先说下我的思路：通过startIndex的加减去操作数组。需要分情况讨论，一种情况是大于等于0的时候，另一种情况是小于0的时候。

核心代码

  const BUTTON_NUMBER = 4;
  const resolveArray= (startIndex: number) => {
    const arrayLength = ButtonArray.length;
    const currentIndex = startIndex % arrayLength;
    const prevArray = [];
    const afterArray = [];
    if (arrayLength > BUTTON_NUMBER) {
      if (startIndex >= 0) {
        if (arrayLength - currentIndex >= BUTTON_NUMBER) {
          prevArray.push(...ButtonArray.slice(currentIndex, currentIndex + BUTTON_NUMBER));
        } else {
          prevArray.push(...ButtonArray.slice(currentIndex));
          afterArray.push(...ButtonArray.slice(0, currentIndex - (arrayLength - BUTTON_NUMBER)));
        }
      } else {
        if (currentIndex == 0 || arrayLength + currentIndex < arrayLength - BUTTON_NUMBER) {
          prevArray.push(...ButtonArray.slice(currentIndex, currentIndex + BUTTON_NUMBER));
        } else {
          prevArray.push(...ButtonArray.slice(currentIndex));
          afterArray.push(...ButtonArray.slice(0, currentIndex - arrayLength + BUTTON_NUMBER));
        }
      }
      return [...prevArray, ...afterArray];
    } else {
      return ButtonArray;
    }
  };