seamless-scroll-react
Version:
react无缝滚动和单步滚动
109 lines (94 loc) • 5.31 kB
Markdown
<h1 align="center">seamless-scroll-react</h1>
```sh
yarn add seamless-scroll-react
npm i seamless-scroll-react
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>
);
};
```
- **onReset** 重置滚动
- **onStopMove** 停止滚动
- **onStartMove** 开始滚动
| 属性 | 描述 | 类型 | 是否必需 | 默认值 |
| :--------------: | :------------------------------------------------: | :---------------------------------------------------: | :------: | :-----------------: |
| 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 | 是 | - |
---