这是叉子 反应-无限滚动器 支助 反应 QQ 18 和类型脚本

反应无限滚动器

在React中无限地加载一个网格或项目列表. 此组件允许您通过同时支持窗口和可滚动元素来创建简单,轻量级的无限滚动页或元素.

• QQ 使用窗口或可滚动元素的能力
• 📏 不需要指定项目高度
• QQ 支持“ 聊天历史”( 逆向) 模式
• * 测试了几百个生产地点并使用了全套设备 这个世界!
• QQ 轻量级替代其它可用的回放卷轴 libs ~ 2.2KB 已修改的 gzipped( g)

• 演示
• 演示来源

安装

npm install @amreraky/react-infinite-scroller --save

如何使用

import InfiniteScroll from '@amreraky/react-infinite-scroller';

窗口滚动事件

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
>
    {items} // <-- This is the content you want to load
</InfiniteScroll>

DOM 滚动事件

<div style="height:700px;overflow:auto;">
    <InfiniteScroll
        pageStart={0}
        loadMore={loadFunc}
        hasMore={true || false}
        loader={<div className="loader" key={0}>Loading ...</div>}
        useWindow={false}
    >
        {items}
    </InfiniteScroll>
</div>

自定义父元素

您可以定义自定义 parentNode 以滚动计算为基准的元素.

<div style="height:700px;overflow:auto;" ref={(ref) => this.scrollParentRef = ref}>
    <div>
        <InfiniteScroll
            pageStart={0}
            loadMore={loadFunc}
            hasMore={true || false}
            loader={<div className="loader" key={0}>Loading ...</div>}
            useWindow={false}
            getScrollParent={() => this.scrollParentRef}
        >
            {items}
        </InfiniteScroll>
    </div>
</div>

道具

解决问题

双打或不间断呼叫 loadMore

如果你遇到双重或不停的呼叫 loadMore 调用, 制作 在添加此组件之前, 请确定您的 CSS 版式工作正常 . 根据容器的高度计算(该单元为: 因此容器的高度必须等于 整个项目高度.

.my-container {
  overflow: auto;
}

此组件不会对您在 API 方面所做的任何假设 打电话 您是否正在装入来自 API 在您的状态/ 减速器中, 以免您重复 API 呼叫 .

loadMore() {
  if(!this.state.isLoading) {
    this.props.fetchItems();
  }
}