React 无限滚动插件

#1

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呗…

1 Like
哪位大神介绍下,react有没有什么好用的无限加载的插件