1.0.0 • Published 2 years ago
rc-seamless-scroll v1.0.0
🏠 主页地址
React Component based on requestAnimationFrame API for transportation element.
安装
yarn add rc-seamless-scroll
# or
npm i rc-seamless-scroll快速上手
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ReactSeamlessScroll, { SeamlessScrollInctance } from 'rc-seamless-scroll';
const listData = [
{
title: '无缝滚动组件展示数据第1条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第2条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第3条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第4条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第5条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第6条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第7条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第8条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第9条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第10条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第11条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第12条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第13条',
date: Date.now(),
},
{
title: '无缝滚动组件展示数据第14条',
date: Date.now(),
},
];
const App = () => {
const ref = React.useRef < SeamlessScrollInctance > null;
return (
<ReactSeamlessScroll list={listData} ref={ref}>
{listData.map((item, index) => (
<div key={index} style={{ height: 22 }}>
<span style={{ marginRight: 22 }}>{item.title}</span>
<span>{item.date}</span>
</div>
))}
</ReactSeamlessScroll>
);
};
ReactDOM.render(<App />, document.getElementById('root'));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 | 是 | - |
注意 :
singleHeight/singleWidth设置的值必须和 item 每一项的高度(宽度)值一样 , 否则可能会引起单步滚动不准!
参与贡献
git clone https://github.com/llq0802/rc-seamless-scroll.git
#or
git clone git@github.com:llq0802/rc-seamless-scroll.git
cd rc-seamless-scroll
yarn
yarn start打开一个新的终端
cd example
yarn
yarn start
访问`http://localhost:1234`测试
yarn test联系我
👤 VX : llq958614130 | E-mail : 958614130@qq.com
支持
❤️ ❤️ ❤️ 觉得还行的话请不吝啬你的小心心奥 ❤️ ❤️ ❤️
This README was generated with ❤️ by readme-md-generator