React-rollfree NPM

react-rollfree

适配react好用的滚动组件

配置

@animationDirection boolean --滚动方向，默认从下到上，从左到右
@animationTime number --过场时间单位：S
@children --滚动组件，支持隐式传入
@childrenUpdateModel string --数据更新后更新列表时机，'now'立即更新，'later'跑完更新
@contextHeight number --单条滚动组件height
@contextWidth number --单条滚动组件width
@endWithNum number --结尾空置滚动单位数量
@height number --滚动外框height
@horizontal boolean --横纵向滚动
@pauseWithHover boolean --默认开启，鼠标hover组件滚动停止
@showBorder boolean --是否显示辅助设计边界
@width number --滚动外框width

使用方式

import RollFree from 'react-rollfree';

工程目录

├── dist                                     // 打包及发布目录
├── lib                                      // 源码目录
│   ├── index.js                             // 主要代码
│   └── utils.js                             // 工具
├── README.md                                // 说明
├── package-lock.json                        // 依赖锁定
├── package.json                             // 工程配置
├── .stylelintrc.js                          // stylelint配置
├── webpack.dev.config.js                    // webpack for dev配置
└── webpack.prod.config.js                   // webpack for prod配置

安装

npm install react-rollfree

分支说明

(说明主分支、开发分支或其他分支作用)

分支	说明
main	主分支
dev	开发分支
haike	可实现黑客帝国特效最大效果，与屏幕帧率相关，30fps(外接屏幕)支持1000滚动模块300000左右文本节点较流畅运行

最新更新日志

版本	说明
2.0.0	--适配 React18 更新，更新空数组组件不更新bug
1.0.15	--修复页面不可见状态切换可能存在的切屏bug
1.0.13	--延时问题修复，感谢rena同学的反馈
1.0.11	--hover问题修复，之前发布没有重新打包，所以发布的是假包
1.0.9	--修复首屏丢失bug，减少单次滚动单位数量
1.0.6	--更新动画