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 | --更新动画 |