原生js实现手机端底部上拉加载数据

<div

  class="touch-wrap"

  @touchstart="handleTouchStart"

  @touchend="handleTouchEnd"

>

  <div class="content-wrap">

    xxxxxxxxxxxxx

   </div>

</div>

使用的事件：touch

涉及的是touchstart，touchend，其实还可以使用touchmove添加上拉时元素位置移动的效果，不过我没做。

分析：底部上拉，如果判断已经在底部？

let element = document.querySelector(".touch-wrap");

let content = document.querySelector(".content-wrap");

element包裹着content，由于content的内容长度超过element的高度，出现滚动条。

此处有三个高度：element自身高度，content的高度，element滚动高度

element自身高度+element滚动高度>content的高度-自定义可操作的高度 

满足上述条件时已经在内容的最后一屏了。

screen.height - touch开始的高度 > 自定义可以进行上拉的操作高度

说回touch事件本身，touchstart的时候使用的是evt.touches[0],touchend时使用的是evt.changedTouches[0]，在谷歌环境下，pageY和clientY竟然是一样的。

上最后的代码

handleTouchStart(evt) {

        let element = document.querySelector(".touch-wrap");content
        let content = document.querySelector(".content-wrap");
        var elementHeight = element.clientHeight;
        var scrollTop = element.scrollTop;
        var contentHeight = content.scrollHeight;

        // 底部上拉
        if (scrollTop + elementHeight > contentHeight - 100) {
          //当touch开始位置位于屏幕中下部分时
         if (screen.height - evt.touches[0].clientY < 350) {
          // 记录此时的位置
            this.startY = evt.touches[0].clientY;
          } else {
            this.startY = 0;
          }
        }
    },

    handleTouchEnd(evt) {
        // 滑动距离大于50认为是上拉
        if (this.startY - evt.changedTouches[0].clientY > 50) {
          // 请求数据等操作
        }

    },