react 列表滚动到底部自动加载更多(在一定区域内)

最新推荐文章于 2024-04-28 16:24:30 发布

百脑神童

最新推荐文章于 2024-04-28 16:24:30 发布

阅读量1.3k

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Zybdads/article/details/126543572

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

this.state = {
            
            lists: [{
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }, {
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }, {
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }, {
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            },{
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }]
        };

handleScroll = () => {
        
        let res=this.myRef.scrollHeight - this.myRef.clientHeight- this.myRef.scrollTop;
        console.log(res);
        //>0 || >1
        if (res>1) {
            //未到底
        } else {
            //已到底部
            this.loadMoreDataFn();
        }

    }


loadMoreDataFn = (that) => {
        //请求更多数据
        this.setState({
            lists: this.state.lists.concat([{
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }, {
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }, {
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }, {
                time: '2018/08/16',
                desc: '月度加分',
                score: '+5'
            }])
        });
    }

<div className='lists' ref={e=>{this.myRef=e;}} onScroll={this.handleScroll}>
                                {
                                    state.lists.map((item, key) => {
                                        return (
                                            <Row className='item' key={key}>
                                                <Col span={10}>{item.time}</Col>
                                                <Col span={10}>{item.desc}</Col>
                                                <Col span={4}>{item.score}</Col>
                                            </Row>
                                        );
                                    })
                                }
                            </div>

.lists{
                height: 240px;
                overflow: hidden auto;
                &>.item{
                    font-size: 16px;
                    color: #000000;
                    padding: 21px 25px 15px;
                   &>.ant-col:nth-child(3){
                     text-align: center;
                     color: #009C2A;
                   }
                   .red{
                    color: #FF0000;
                   }
                }
                &>.item:nth-child(even){
                    background: #F9F9F9;
                }
                
            }