javascript - 加载新数据时如何停止页面滚动

问题描述

我在反应中有一个类组件来映射 Post 组件。在底部，我有一个从数据库加载更多数据的按钮。我遇到的问题是，当加载新数据时，页面滚动到底部。我想让它坚持用户以前的帖子

我的组件：

import React,{Component} from 'react';
import Ride from '../Components/Ride';
import firebase from 'firebase'

class RideList extends Component{

    state={
        rides: [{
            user:{
                photo: '',
                name: '',
                uid: ''
            },
            likes: 0,
            likers: [],
            time: '',
            line: [{lng:22.01,lat:41.01}],
            when: 0
        }],
        lastDoc: {}
    }

    componentDidMount(){
            const db = firebase.firestore();
            db.collection('posts').orderBy('when','desc').limit(5).get().then(res=>{
                const data = []
                res.docs.map(doc=>{
                    data.push({...doc.data(),id: doc.id})
                })
                this.setState({rides: data, lastDoc: res.docs[res.docs.length-1]})
            }).catch(er=>{
                console.log(er)
            })
    }

    loadMore = ()=>{
        const rides = [...this.state.rides];
        const db = firebase.firestore();
        db.collection('posts').orderBy('when','desc').startAfter(this.state.lastDoc).limit(5).get().then(res=>{
                res.docs.map(doc=>{
                    rides.push({...doc.data(),id: doc.id})
                })
                this.setState({rides: rides, lastDoc: res.docs[res.docs.length-1]})
        })
    }

    render(){
        return(
            <div style={{textAlign:'start'}}>
                {this.state.rides.map((el,index)=>{
                        return(
                            <div>
                                <Ride key={el.when} {...el} user={this.props.user}/>
                            </div>
                        )
                })}
                {this.props.uid ? '':<button onClick={()=>this.loadMore()}>Load more</button>}
            </div>
        )
    }
}

export default RideList;

标签： javascriptreactjsscrollcomponents

javascript - 加载新数据时如何停止页面滚动

问题描述

解决方案

推荐阅读