原生js實現下拉刷新

我的個人網站：https://m.theeye.tech/

      

之前有分享過一次原生js實現上拉加載，今天我來給大家分享下原生js實現下拉刷新；等后面有時間我將把這兩個放一起封裝成一個簡單的方法，我個人認為會比mescroll的包小，且較為方便，而且我認為mescroll的兼容問題還是很多的。

      好了，廢話不多說，開始正題：

　　實現下拉刷新原理主要是利用移動端的touch事件來實現的；

　　touch事件主要為以下幾種：

　　touchstart : 觸摸開始（手指放在觸摸屏上）

　　touchmove : 拖動（手指在觸摸屏上移動）

　　touchend : 觸摸結束（手指從觸摸屏上移開）

　　touchenter ：移動的手指進入一個dom元素。

　　touchleave ：移動的手指離開一個dom元素。

　　還有一個touchcancel，是在拖動中斷時候觸發。

　　而我們下拉刷新的過程主要是用到了觸碰屏幕（touchstart），開始下拉（touchmove），松手（touchend）。

　　對的，原理就是這么簡單，但是實際上處理下拉還是有挺多的小問題的，先上代碼：

　　js代碼

 

　　

// 下拉刷新
    _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('下拉刷新');
    }

　　html和css文件不知道扔哪里去了，到時候再補補吧，先這樣啦，工作~