下拉加载数据

滚动触底加载

当滚动到底部时,如果到底了,则加载新数据进来

 

判断依据和方法:

有三个相关属性，是：clientHeight、scrollHeight、scrollTop。

clientHeight：元素的高度,例如DIV设置height:300px.在浏览器中显示出来就是300px的高度.clientHeight值就是300.

scrollHeight：内容的高度.DIV里面的内容高度,假如是500px,(超过了300px,会有滚动条).scrollHeight值就是500.

scrollTop：这个值是滚动条离滚动条起点的距离.DIV高300,里面内容500,还有200显示不出来,要拖滚动条才能看到.这个值的范围就是0-200.而修改这个值,那么滚动条就会滚动到指定的位置.

如何根据这三个值来判断滚动条位置,然后加载数据

是否滚动到底了? scrollTop == (scrollHeight – clientHeight) // 内容高度减DIV高度,这是滚动条能滚动的最大值

是否滚动到了指定位置? 比如离底还有50像素时,滚动到离底95%的位置时.都可通过滚动条最大值换算出位置.

要实现拉到底部自动加载内容。注册滚动条事件,方法内判断滚动条是否到底加载即可.

避免重复加载

这个问题的原因是滚动条事件在触发时可能多次都在满足条件的范围内,那么会导致重复加载数据.但实际上需要等数据加载完后(文档高度变化后),才进行下一次触发.否则,会不停地发数据请求.
解决办法是,设置一个变量,在加载之前,将它置为真.那么在拉到最底时判断一下这个变量值再加载
在请求数据的方法里,回调 函数中成功时,再将变量值置为假.如果有分页值,那么还要将分页值加1

     $("#databox_pc").scroll(function(){  
         var $this =$(this),  
         viewH =$(this).height(),//可见高度  
         contentH =$(this).get(0).scrollHeight,//内容高度  
         scrollTop =$(this).scrollTop();//滚动高度  
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容  
        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部95%时,加载新内容  
                     // 这里加载数据..  
                    if (!isloaddata)
                        loaddata()
                    else
                        console.log("加载中,不要重复加载")
        }  
     }); 

手机端可以绑定div的touchstart touchmove touchend

    // dom监听touchstart事件.得到起始位置的Y坐标
    mdom.ontouchstart = (e) => {
      // 得到触摸起点的Y坐标,(上下划是判断y(top),左右是判断x(left))
      touchStartY = e.touches[0].pageY.toFixed(2);
    }

    // dom监听touchmove事件.滑动时,该事件会一直触发
    mdom.ontouchmove = (e) => {
      // 得到触摸时的Y坐标,这里处于滑动状态,还没释放触摸时,可以做个提示,例如"释放刷新".
      let moveY = e.touches[0].pageY.toFixed(2);
      let stepLen = (touchStartY - e.touches[0].pageY).toFixed(2);
    }

    // dom监听touchend事件.触摸结束时,执行加载数据动作
    mdom.ontouchend = (e) => {
      // 判断是否到底或者到顶 然后加载数据
    }