js 实现上拉加载和下拉刷新

---

一、js 实现上拉加载

实现上拉加载的原理：监听滚动条滑到页面底部，然后就去做一次请求数据。

window.onscroll = function () {
      const scrollH = document.documentElement.scrollHeight；// 文档的完整高度
      const scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移
      const screenH = window.screen.height;  // 屏幕可视高度
      if ((scrollH - scrollT - screenH) < 5) { // 5 只是一个相对值，可以让页面再接近底面的时候就开始请求
          // 执行请求
      }
};

二、js 实现下拉刷新

实现下拉刷新原理：利用移动端的 touch 事件来实现。

touch事件主要为以下几种：

• touchstart：触摸开始（手指放在触摸屏上）
• touchmove：拖动（手指在触摸屏上移动）
• touchend：触摸结束（手指从触摸屏上移开）
• touchenter：移动的手指进入一个dom元素。
• touchleave：移动的手指离开一个dom元素。
• touchcancel：是在拖动中断时候触发。

下拉刷新的过程主要是用到了触碰屏幕（touchstart），开始下拉（touchmove），松手（touchend）。

// 下拉刷新
this.outerScroller.addEventListener(
    'touchstart',
    function (event) {
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        this.touchStart = touch.pageY;
        // event.preventDefault(); // 阻止浏览器默认下滑事件
    },
    false
);

this.outerScroller.addEventListener(
    'touchmove',
    function (event) {
        var touch = event.targetTouches[0];
        this.scroll.style.top =
        this.scroll.offsetTop + touch.pageY - this.touchStart + 'px';
        this.touchStart = touch.pageY;
        this.touchDis = touch.pageY - this.touchStart;
        if (this.scroll.offsetTop > 0 && document.body.scrollTop < 50) {
        document.body.addEventListener('touchmove', this.preEvent, {
            passive: false
        }); // passive 参数不能省略，用来兼容ios和android
        this.emptyDiv.style.marginTop =
            Number(this.scroll.style.top.replace(/\s+|px/gi, '')) + 20 + 'px'; // 让下拉的父级高度等于下滑部分+下滑距离，让整体呈现下拉的感觉
        } else {
        return;
        }
        if (this.scroll.offsetTop >= 80) {
        // 限制下拉的距离
        this.scroll.style.top = '80px';
        }
    },
    false
);

this.outerScroller.addEventListener(
    'touchend',
    function (event) {
        this.touchStart = 0;
        var top = this.scroll.offsetTop;
        var num = this.scroll.style.top.replace(/\s+|px/gi, ''); // 将top值转成数值
        if (num < 0) {
        // 当上滑到顶部的时候，不超过边界
        this.scroll.style.top = '0px';
        return;
        }
        if (top > 40) refresh();
        if (top > 0) {
        var time = setInterval(function () {
            this.scroll.style.top = this.scroll.offsetTop - 2 + 'px';
            this.emptyDiv.style.marginTop =
            Number(this.scroll.style.top.replace(/\s+|px/gi, '') + 20) +
            'px'; // 让下拉的父级高度等于下滑部分+下滑距离，让整体呈现下拉的感觉
            if (this.scroll.offsetTop <= 0) clearInterval(time);
        }, 1);
        }
        /* var time = setTimeout(function(){
        scroll.style.top = scroll.offsetTop -2+'px';
        emptyDiv.style.height = Number(360) + Number(scroll.style.top.replace(/\s+|px/gi,"")) + 'px'; // 让下拉的父级高度等于下滑部分+下滑距离，让整体呈现下拉的感觉
        if(scroll.offsetTop<=0)clearTimeout(time);
        time();
    },1)
    while(top>0){
        time();
    } */
        // event.stopPropagation();
        // window.event.returnValue = false;
        document.body.removeEventListener('touchmove', this.preEvent, {
        passive: false
        }); // passive 参数不能省略，用来兼容ios和android
    },
    false
);

function refresh () {
    console.log('下拉刷新');
}

三、注意事项

• 防抖的情况。
• 没有数据的情况。

【参考】
https://www.cnblogs.com/xinsir/articles/10475055.html
https://www.cnblogs.com/xinsir/p/10314694.html