Question

我有api查询页码和计数。当我渲染组件时，我需要每页只显示4个结果。如果我滚动到底部，下一组记录将被追加。它会一直运行到最后。我已经尝试过实现这一个。请检查我的以下代码。此代码无法正常运行。

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
    scrollToload(pageNo, count) {
      $.ajax({
        url:url+'pageNo='+pageNo+'&count='+count,
        type:'GET',
        contentType: 'application/json; charset=UTF-8',
        dataType:'json',
        success:function(data) {
          this.setState({
            result:data
          });
        }.bind(this)
      });
    }
    handleScroll () {
      var self = this;
      var count = 0, pageNo = 0;
      var lastScrollTop = 0;
      var $scrollDiv = $('.scroll-content');
      $scrollDiv.on('scroll', function(){
        var contentHeight = $('.scroll-content > div').innerHeight()-40;
        var windowHeight = $scrollDiv.innerHeight();
        var scrollTop = $scrollDiv.scrollTop();
        if(scrollTop > (contentHeight-windowHeight)) {
          if(!self.state.loadingFlag) {
            $('#preloader').show();
            count += 4;
            page += 1;
            self.setState({
              loadingFlag:true
            });
            setTimeout(function(){
              self.scrollToload(pageNo, count);
            }, 10);
          }
          lastScrollTop = scrollTop;
        }
      });
    }
    componentDidMount () {
      this.handleScroll ()
    }
render() {
  return <div className="scroll-content">
   {this.state.map(function(el, i){
     return <div key={i}>
       <img src={el.url} />
       <h2>{el.title}</h2>
     </div>
   })}
</div>
}
}

导出默认App; 现在它有时在浏览器中工作得更好，但移动设备无法正常工作。还有其他更好的方法可以改善这个概念吗？

如何用ajax实现反应js中的无限滚动？

0 个答案: