无限加载

jQuery版本

一开始思路是，当整个文档的高度 - 屏幕高度 - 滚动条高度 = 0时，加载信息。但是有的浏览器在滑动时滚动条可能不太正常，可能出现先整个浏览器上移一下，然后才出现滚动条。总之就是达不到指定条件。

$('body').height() - $(window).height() - $(window).scrollTop() == 0

所以考虑当相减的值小于某个值（比如100）时就加载信息，但是这样在滑动过程中会重复请求多次。所以用一个状态flag去控制。

var flag = false;
var page = 1;
//数据请求函数
function getPlayerList(){
    //ajax请求
    success: (){
        // 如果知道已经是最后一页，则取消滚轮事件
        $(window).off('scroll');
        flag = true; //表示数据加载成功之后改为true
    }
};
getPlayerList(page);

$(window).on('scroll',slider);
//滑动触发的函数
function slider(){
    if(flag){
          var windowHeight = $('body').height(); //整个文档高度
          var scrollTop = $(window).scrollTop();
          if(windowHeight - screenHeight - scrollTop < 100){
                flag = false; // 在数据插入成功之前是false，防止多次触发
                page++;
                getPlayerList(page);
          }   
    }
}

react版本

这里要找准触发滚动事件的元素是哪个。由于我这边触发滚动的组建是要渲染数据的组件的父组件，所以我给父组件加了{ height: '100%', overflow: 'hidden' }属性，给当前组件加上{ height: '100%', overflow: 'auto' }让真正滑动的组件变成当前组件。

loadMore() {
    if (
      this.bodyBox.scrollTop + this.bodyBox.clientHeight ===
      this.bodyBox.scrollHeight
    ) {
      let page = this.state.page + 1;
      this.setState(
        {
          page
        },
        () => {
             //发起请求
        }
      );
    }
  }

<div
     style={{ height: '100%', overflow: 'auto' }}
     ref={c => {
       this.bodyBox = c;
     }}
     onScroll={this.loadMore}
>
</div>

ref属性请看react基础，就是获取渲染后真正的dom节点。

• scrollTop ：滑动过的距离

• clientHeight：内容可是区域的高度

• scrollHeight：内容的整体高度，包括滚动过去的内容