码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-11-01 21:35:08      阅读:21      评论:0      收藏:0      [点我收藏+]

标签:reac   data   axios   lse   距离   window   off   scrolltop   cli   

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

//添加窗口滚动事件
    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);
          })
        })
      }
    }
  }

 

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

标签:reac   data   axios   lse   距离   window   off   scrolltop   cli   

原文地址:https://www.cnblogs.com/ximenchuifa/p/13909065.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!