Skip to content

llq0802/rc-seamless-scroll

Repository files navigation

Welcome to rc-seamless-scroll 👋

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 [email protected]: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 : [email protected]

支持

❤️ ❤️ ❤️ 觉得还行的话请不吝啬你的小心心奥 ❤️ ❤️ ❤️


This README was generated with ❤️ by readme-md-generator