react 中如如何实现上拉加载事件

Posted 2020-12-20 ximenchuifa

文档上卷的距离+窗口的高度=文档的距离 就可以说到底了 但是我们往往在还未到低时候就开始加载下一页

//添加窗口滚动事件
    window.onscroll = () => {
      //上卷距离 
      let st = document.documentElement.scrollTop || document.body.scrollTop;
      //窗口高度
      let wh = document.documentElement.clientHeight;
      //文档高度
      let dh = document.documentElement.offsetHeight;
      if(st+wh+50>=dh&&this.isRequst){//到底了
        this.isRequst=false;
        console.log("到底了");
        this.n++;
        let times=this.getTime(this.n)
        //发请求 
        axios({url:"/api/4/stories/before/"+times.reqTime}).then(res=>{
          this.setState({
            list:[
              ...this.state.list,
              {
                time:times.showTime,
                data:res.data.stories
              }
            ]
          },()=>{
            this.isRequst=true
            console.log(this.state.list);
          })
        })
      }
    }
  }