0.2.7 • Published 2 years ago
@mfts2048/toothed-gear v0.2.7
齿轮 toothed gear
array/circularArray
介绍
应用场景：轮播图，无限滚动的场景下需要对不确定长度的数据进行分组，分组后的数据需要循环展示。
例如数据有 50 条，那么恰好可以分成 10 组，每组 5 条数据。
但是倘若数据有 51 条，那么就需要分成 11 组，前 10 组 5 条，最后一组 1 条。
这个时候产品的需求是，每组 5 条数据，不足 5 条的数据需要补全，补全的数据是从头开始的。
这个时候就需要用到 circularArray 了。
circularArray 会返回一个函数，这个函数接收两个参数，第一个参数是需要分组的数据，第二个参数是每组的长度。
类似一个小齿轮拨动大齿轮一样，你需要的一屏就是大齿轮，所有的数据则是小齿轮，你只需要关心你的一屏数据，而不需要关心数据的总长度。
使用需知
该函数不会改变原数组，只会读取对应的数组的索引值
案例
const array = [0, 1, 2, 3, 4, 5, 6, 7, 8];
// 将上面的数据处理成每页五条数据就会被处理成这个样子
| 屏幕第一条数据 | 屏幕第二条数据 | 屏幕第三条数据 | 屏幕第四条数据 | 屏幕第五条数据 | |
|---|---|---|---|---|---|
| 8 | 0 | 1 | 2 | 3 | |
| 上翻 | 4 | 5 | 6 | 7 | 8 |
| 页面展示数据 | 0 | 1 | 2 | 3 | 4 |
| 下翻 | 5 | 6 | 7 | 8 | 0 |
| 1 | 2 | 3 | 4 | 5 | |
| 6 | 7 | 8 | 0 | 1 |