react滚动条下拉加载更多

最新推荐文章于 2025-04-30 14:33:54 发布

Dawn_pre

最新推荐文章于 2025-04-30 14:33:54 发布

阅读量1.2k

点赞数

分类专栏： study progress 文章标签： react js

本文链接：https://blog.youkuaiyun.com/csdn_smartyang/article/details/109725640

版权

study progress 专栏收录该内容

19 篇文章

订阅专栏

本文探讨如何在React应用中实现滚动条下拉加载更多数据的功能，通过监听滚动事件并结合JavaScript进行判断，实现在内容区域接近底部时自动加载新数据。

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

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.wrapper = React.createRef();
        }
async getOldMore(){
	/*放你的请求地址*/
}
componentDidMount() {
        let timeCount;
        const that=this;

        function callback() {
            const top =that.wrapper.current.getBoundingClientRect().top;
            const windowHeight = window.screen.height;

            if (top && top < windowHeight) {
                // 当 wrapper 已经被滚动到页面可视范围之内触发
                that.getOldMore();
            }
        }

        this.content.current.addEventListener('scroll', function () {
            if (this.state.pagefinished) {
                return ;
            }

            if (timeCount) {
                clearTimeout(timeCount);
            }

            timeCount = setTimeout(callback, 50);
        }.bind(this), false);
  render() {
  	/*你之前的数据*/
	<div className="loadMore" ref={this.wrapper} onClick={()=>this.getOldMore()}>加载更多</div>
	}
}