react-iscroller 是参照 twitter 的需求实现的无限滚动插件。
安装
npm i react-iscroller
使用
import { InfiniteScroller } from "react-iscroller"
return <InfiniteScroller
itemAverageHeight={22}
containerHeight={window.innerHeight}
items={this.state.messages}
itemKey="id"
onRenderCell={this.renderCell}/>
特性
-
零依赖
原生js+react实现的 -
高性能
这是 chrome 的模拟器里测试的性能
-
无限加载
滑动到底部会触发 onEnd 事件,这里可以加载新数据 -
懒加载
从始至终只显示一屏多一点的数据 -
pure component
新的数据才会触发dom变更
-
动态高度
不必像市面上的无限滚动插件那样每个item必须是等高的,只需要设置一个最小高度就行了。 -
缓存
有了缓存我们就能在组件创建的时候无缝的回到上次看到的位置了。
-
resize
滑动到任意位置,从横屏切换到竖屏都能重新无缝的滑动到顶部。而且切换过程中,看到的那个item不会变不会抖动。
在线地址
欢迎 debug 我的博客地址: corol.me/slack, 这里有我上面介绍的全部特性哦。手机或者模拟器打开效果更佳。
项目地址
react-iscroller 对你有帮助的话点个star呗…