react 下拉滚动功能

最新推荐文章于 2025-06-28 15:29:20 发布

原创最新推荐文章于 2025-06-28 15:29:20 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在React中实现下拉滚动加载功能。通过监听窗口滚动事件，判断滚动条是否到达底部，当达到底部时更新组件状态以加载更多内容。示例代码展示了在组件挂载和卸载时如何绑定和移除滚动事件处理函数，以及如何通过修改state来改变内容区域的高度，模拟加载更多数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

constructor(props) {
  super(props);
  this.state = {
    data: [],
    loading: false,
    hasMore: true,
    height:2000
  }
}

onScrollHandle(event) {
  const clientHeight = event.target.documentElement.clientHeight
  const scrollHeight = event.target.documentElement.scrollHeight
  const scrollTop = event.target.documentElement.scrollTop
  const isBottom = (clientHeight + scrollTop === scrollHeight)

  const height=this.state.height;

  if(clientHeight + scrollTop+100>scrollHeight){
    this.setState({
      height: height+2000,
    });
  }
}

componentDidMount() {
  window.addEventListener('scroll', this.onScrollHandle.bind(this));
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.onScrollHandle.bind(this));
}

render() {
  return (
    <div style={{height:this.state.height+'px',overflowY: "scroll",backgroundColor:"red"}} >
    </div>
  );
}