跳到主要内容

useCycleList

循环浏览项目列表

Usage

实时编辑器

function Demo() {
  const [state, next, prev] = useCycleList([
    "Dog",
    "Cat",
    "Lizard",
    "Shark",
    "Whale",
    "Dolphin",
    "Octopus",
    "Seal",
  ]);

  return (
    <div>
      <div>{state}</div>
      <div>
        <button onClick={() => next()}>next</button>
        <button onClick={() => prev()}>prev</button>
      </div>
    </div>
  );
};

结果
Loading...

API

useCycleList

Returns

readonly [T, (i?: number | undefined) => void, (i?: number | undefined) => void]: 包含以下元素的元组:

  • 数组中当前的索引对象值
  • 设置索引为前一个的函数
  • 设置索引为后一个的函数

Arguments

参数名描述类型默认值
list循环数组T[] (必填)-
i数组索引number | undefined-