下拉刷新，上拉加载

实现下拉刷新原理：
通过touchstart /touchmove/touchend
记录开始的坐标，记录移动中的坐标，移动中的坐标-开始的坐标大于30的时候，才触发刷新方法，然后去请求数据。

在获取元素总高度和滚动条高度的时候。添加滚动事件的时候，元素一定要是在显示的状态下。否则，获取到的一直是0

index.html

<style>.status{display:none}</style>
<div class="contract">
  <div class="contract-body">
      <div class="status1">
        <p>刷新中……</p>
       </div>
                <ul class="contract">
                    <li>列表内容</li>
                    <li>列表内容</li> 
                   <li>列表内容</li> 
                    <li>列表内容</li>
                </ul>
  </div>
</div>

js

 //定义的全局变量
 var disY, startY, endY;
    //触摸事件开始时触发
    $('.contract').on('touchstart', function (e) {
      console.log('开始')
        startY = e.changedTouches[0].pageY;
    });
    //触摸事件移动中时触发
    $('.contract').on('touchmove', function (e) {
        endY = e.changedTouches[0].pageY;
        disY = endY - startY;
        if (disY > 30) {
            $('.status1').css({
                display: 'block',
                height: disY + 'px',
            });
        }
    });
    //触摸事件结束时触发
    $('.contract').on('touchend', function (e) {
        endY = e.changedTouches[0].pageY;
        disY = endY - startY;
        if (disY > 72) {
            //定义一个定时器，返回下拉到一定的高度
            var timer = setInterval(function () {
                disY -= 13;
                if (disY <= 60) {
                    $('.status1').css({
                        height: 52 + 'px',
                    });
                    clearInterval(timer);
                    refresh();
                }
                $('.status1').css({
                    height: disY + 'px',
                });
            }, 75);
        }
    });
    //请求刷新数据
    function refresh() {
        var t = setTimeout(function () {
          getEleContract()
            $('.status1').css({
                display: 'none',
                height:0
            });
            clearTimeout(t)
        }, 2000);
    }

上拉加载

window.onscroll = debounce(scrollToGetDatas,500)
function scrollToGetDatas() {
  console.log(isOver_daikan)
if (isOver_daikan) {
return
}
var wTop = $(window).scrollTop();
var boxHeight = $('.item-view').outerHeight();
if (wTop + $(window).outerHeight() >= boxHeight) {
hsList()

}

}
function debounce(fn,delay){
  let timer = null //借助闭包
  return function() {
      if(timer){
          clearTimeout(timer) 
      }
      timer = setTimeout(fn,delay) // 简化写法
  }
}

function hsList(){
          arr = res.data.scmHouseMaintainHistoryRcdList
        if(arr.length==res.data.total){
          isOver_daikan=true
          $('.no-more').css('display','block')
        }

}