seamless-scroll-react

安装

yarn add seamless-scroll-react

# or

npm i seamless-scroll-react

# or

pnpm i seamless-scroll-react

快速上手

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	是	-

---