seamless-scroll-react

<h1 align="center">seamless-scroll-react</h1>

## 安装

```sh
yarn add seamless-scroll-react

# or

npm i seamless-scroll-react

# or

pnpm i seamless-scroll-react
```

## 快速上手

```jsx
import ReactSeamlessScroll, { SeamlessScrollInctance } from 'rc-seamless-scroll';

const list = [
  {
    title: '无缝滚动组件展示数据第1条',
  },
  {
    title: '无缝滚动组件展示数据第2条',
  },
  {
    title: '无缝滚动组件展示数据第3条',
  },
  {
    title: '无缝滚动组件展示数据第4条',
  },
  {
    title: '无缝滚动组件展示数据第5条',
  },
  {
    title: '无缝滚动组件展示数据第6条',
  },
  {
    title: '无缝滚动组件展示数据第7条',
  },
  {
    title: '无缝滚动组件展示数据第8条',
  },
  {
    title: '无缝滚动组件展示数据第9条',
  },
  {
    title: '无缝滚动组件展示数据第10条',
  },
  {
    title: '无缝滚动组件展示数据第11条',
  },
  {
    title: '无缝滚动组件展示数据第12条',
  },
  {
    title: '无缝滚动组件展示数据第13条',
  },
  {
    title: '无缝滚动组件展示数据第14条',
  },
];
const App = () => {
  const ref = React.useRef < SeamlessScrollInctance > null;
  return (
    <ReactSeamlessScroll list={list} ref={ref}>
      {list.map((item, index) => (
        <div key={index}>{item.title}</div>
      ))}
    </ReactSeamlessScroll>
  );
};
```

## SeamlessScrollInstance

- **onReset** 重置滚动
- **onStopMove** 停止滚动
- **onStartMove** 开始滚动

## Props

|       属性       |                        描述                        |                         类型                          | 是否必需 |       默认值        |
| :--------------: | :------------------------------------------------: | :---------------------------------------------------: | :------: | :-----------------: |
|   isAutoScroll   |                  是否开启自动滚动                  |                       _boolean_                       |    否    |        true         |
|       list       |                    原始数据列表                    |               Record<_string_, _any_>[]               |    是    |          -          |
|       ref        |                    引用组件方法                    |                SeamlessScrollInstance                 |    否    |          -          |
|       step       |         步进速度，step 也是单步大小的约数          |                       _number_                        |    否    |          1          |
|  limitScrollNum  |                 开启滚动的数据大小                 |                       _number_                        |    否    |          3          |
|      hover       |                  是否开启鼠标悬停                  |                       _boolean_                       |    否    |        false        |
|    direction     |                    控制滚动方向                    |               up , down , left , right                |    否    |        'up'         |
|   singleHeight   |          单步运动停止的高度(每一项的高度)          |                       _number_                        |    否    |          -          |
|   singleWidth    |          单步运动停止的宽度(每一项的宽度)          |                       _number_                        |    否    |          -          |
|  singleWaitTime  |                  单步停止等待时间                  |                       _number_                        |    否    |       1000ms        |
|    isRemUnit     |                 是否开启 rem 单位                  |                       _boolean_                       |    否    |        false        |
|      delay       |                    动画延迟时间                    |                       _number_                        |    否    |         0ms         |
|       ease       |         动画方式(与 css 过度效果配置一致)          | *string*或者{x1:number,x2:number,y1:number,y2:number} |    否    |       ease-in       |
|      count       |   动画循环次数，默认-1 表示一直动画 0 表示不循环   |                       _number_                        |    否    |         -1          |
|     copyNum      |                  拷贝几份滚动列表                  |                       _number_                        |    否    |          1          |
|      wheel       | 开启鼠标悬停时支持滚轮滚动`(hover 为 true 时生效)` |                       _boolean_                       |    否    |        false        |
| wrapperClassName |                   最外层盒子类名                   |                       _string_                        |    否    |          -          |
|  wrapperHeight   |                   最外层盒子高度                   |                       _number_                        |    否    | children 列表的高度 |
|     children     |                      列表节点                      |                       ReactNode                       |    是    |          -          |

---