Question

我需要进行无限滚动，所以第一件事就出现在我脑海中，我怎么知道表格的滚动属性？这样我可以决定加载更多项目并更新状态吗？

比如，如何知道仍然只有10个项目未见（超出视口）？

Answer 1

我刚刚在codepen.io上写了infinite scrolling ReactJS演示，请查看它，至少给我一个 UP ，谢谢，哈哈。

不确定我是否可以清楚解释，但我已尽力了：）

我怎么知道表的滚动属性

Answer当您进行无限滚动时，您决定加载更多内容的时刻是，当最后一个列表元素位于底部时。首先，我们需要定义边界和规则，当用户滚动页面时，您将在哪里获取更多数据。

在我的演示中，我将容器的底线设置为数据获取边界。

// jsx
<div className="container" ref={ref => this.container = ref}>
  { list.map((item, index) => (
    <p className="list-item" key={`item-${index}`}>{ item.name }</p>
  ))}

  <div ref={ref => this.bottomLine = ref}></div>
</div>

// listen to the scroll event of the container
// when the bottom-line element reaches the bottom of the container
// fetchData() will be triggered

componentDidMount() {
  this.container.addEventListener('scroll', () => {
    const CONTAINER_HEIGHT = this.container.getBoundingClientRect().height;
    const { top: bottomLineOffsetTop } = this.bottomLine.getBoundingClientRect();

    if (bottomLineOffsetTop <= CONTAINER_HEIGHT) {
      console.log('load more data');
      this.fetchData();
    }
  });
}

如何知道仍然只有10件物品未见（超出视口）

Answer此外，您需要一个规则，标记您是否有更多要加载的数据，或只是标记noMoreData并停止加载。

事实上，在生产环境中，我们不会计算剩下多少项，或者我们也不知道。由于我们需要从服务器端请求数据，例如RESTful API，因此我们才知道是否有更多项目。

例如，我从xx.api.com/getList?pageNo=1&size=10请求数据，这意味着我从第一页开始，我希望每页的长度为10。

如果它使用空数组或长度小于10的数组进行响应，那么我可以将状态noMoreData标记为true。 if (noMoreData === true)，fetchData()将返回，不会再向api请求数据。

fetchData() {
    const { list, pageNo, displayCount, noMoreData } = this.state;

    if (noMoreData) {
      console.log('no more data');
      return;
    }

    if (pageNo > 6) {
      // no more data
      this.setState({
        noMoreData: true
      });
    } else {
      let responseList = [];

      // mock the response of a API request
      for(let i = 0; i < 5; i++) {
        responseList.push({
          name: `from-page-${pageNo}`
        });
      }

      this.setState({
        list: [ ...list, ...responseList ],
        pageNo: pageNo + 1
      });
    }
  }

听滚动事件做无限滚动..？

1 个答案: