react-chatview, React.js的无限滚动聊天或者提要组件

分享于 

4分钟阅读

GitHub

  繁體 雙語
Infinite scroll chat or feed component for React.js
  • 源代码名称:react-chatview
  • 源代码网址:http://www.github.com/jsdevkr/react-chatview
  • react-chatview源代码文档
  • react-chatview源代码下载
  • Git URL:
    git://www.github.com/jsdevkr/react-chatview.git
    Git Clone代码到本地:
    git clone http://www.github.com/jsdevkr/react-chatview
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jsdevkr/react-chatview
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应 chatView

    npm version

    React.js的无限滚动聊天或者提要组件

    变更日志文件

    实时演示

    Live Demo

    下面是live演示插件,以及现场演示插件的源代码,这里的也是一个简单的fiddle。

    另一个无限滚动组件?

    在这里写入时,它的他工作缺少杀手特性:

    • 浏览器布局&调整"工作而已"的大小( 无需预先知道任何高度)
    • 作为新闻发布( 无限负荷) 或者聊天( 无限负载)
    • 硬件加速滚动

    这项工作起源于 fork,并修改了 seatgeek/响应无限长的时间,随后被重写了几次。

    启动

    使用npm安装 react-chatview

    npm install react-chatview --save

    你还可以使用全球友好的UMD构建:

    <scriptsrc="path-to-react-chatview/dist/react-chatview.min.js"></script>

    你还可以使用 es5 commonjs构建:

    <scriptsrc="path-to-react-chatview/lib/react-chatview.js"></script>

    文档

    它很容易使用。 实际的内容行应该作为传递。 有四个有趣的道具:

    • 容器的className 额外css类字符串
    • 用于聊天( 最底层最新) ( 最先进的最新版)的flipped true
    • reversed true 不反转元素
    • scrollLoadThreshold 像素距离触发无限负荷的距离
    • 当滚动传递 scrollLoadThreshold 时,shouldTriggerLoad 回调函数检查聊天视图是否触发无限负载循环。 这里回调是可选的,默认情况下,onInfiniteLoad 总是触发。
    • 加载 onInfiniteLoad 请求回调,应该会导致状态更改,从而呈现更多的子节点
    • returnScrollable 返回可以滚动事件处理的scollable对象

    参见 jsfiddle示例以获得完整的工作示例。

    待办事项

    • 实际上不是无限的- 当前加载的所有元素仍然是 dom

    • 在适当时自动滚动到最新消息( 固定)

      使用 returnScrollable 并将 scrollable.scrollTop 设置为 scrollable.scrollHeight

    • 当内容调整大小或者在焦点上方/下方添加内容时自动更正滚动抖动

    • 可以配置加载 Spinner

    • 优化移动( 但它可以工作)

    可能还有更多的功能缺失。 请打开一个问题 !

    如果你使用这个,请给我写个字。 : )

    如果这个项目有价值,我将投入更多的时间。


    COM  react  component  INF  滚动  CHAT  
    相关文章