原生js實現簡單的下拉刷新功能

前言：

咱們在瀏覽移動端web頁面的時候，常常會用到下拉刷新。
如今咱們用原生的js實現這個很是簡單的下拉刷新功能。

（舒適提示：本文比較基礎，功能也很簡單。寫的很差的地方，但願大神提點一二。）

1、建立簡單的html頁面：

假設代碼裏的float-box是一個主頁面。

2、封裝下拉刷新的功能模塊：

（1）首先建立一個Slide構造函數，用來初始化屬性與函數。
function Slide(dom){
    this.start_y=null;//手指滑動屏幕的初始位置
    this.end_y=null;//手指滑動屏幕的結束位置
    this.render(dom);//初始化下拉功能的render函數，這裏的dom參數是你的主頁面。
}
（2）編寫render函數
render函數是用來動態建立下拉刷新的動畫圖。如今咱們在Slide原型上編寫render函數。
    Slide.prototype={
    render:function(dom){
        //拿到body節點
        var body = document.getElementsByTagName('body');
        //建立div，用來顯示下拉效果。這個div有'正在刷新。。' 和 '下拉刷新' 這個兩個子節點。
        var newItem = document.createElement('div');
        //給div設置class屬性，該class是下拉效果的樣式
        newItem.className = 'slide-wrap';
        //利用innerHTML將  '正在刷新。。。' 和 '下拉刷新' 這兩個子節點插入到上面建立的div中。
        newItem.innerHTML = '<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>';
        //而後將建立的div插入到主頁面的前面
        body[0].insertBefore(newItem,dom[0]);
        //獲取建立完成的下拉刷新div
        var dom2 = document.getElementsByClassName('slide-wrap');
        //運行slide_start（）
        this.slide_start(dom2);
    }}

下圖爲下拉刷新的css樣式：

（3）編寫slide_start()函數

slide_start:function(dom2){
    var _this = this;
    //監聽document整個文檔的touchstart事件
    document.addEventListener('touchstart',function(evt){
        var touch = evt.touches[0]; //獲取第一個觸點
        _this.start_y = Number(touch.pageY);//第一個觸點的Y座標 
    });
    //運行slide_move
    _this.slide_move(dom2);
}

（4）編寫slide_move()函數

slide_move:function(dom2){
    var _this = this;
    //監聽document的touchmove事件
    document.addEventListener('touchmove',function(evt){
        //下面這一行代碼是保證在手指移動的距離還不到規定的長度時候，就不顯示 '正在刷新。。' 
        dom2[0].childNodes[0].style.display='none';
        var touch = evt.touches[0]; //獲取第一個觸點
        //獲取手指向下移動的長度距離
        _this.end_y = Number(touch.pageY) - _this.start_y; 
        //判斷手指移動距離是否大於5.這個爲何設置爲5，而不是0呢，主要是爲了不用戶不覺意的輕微滑動
        if(_this.end_y > 5){
        //當滑動距離大於5時，將 ‘下拉刷新’ 的效果顯示出來，同時將它的高度賦值爲手指滑動的距離，以達到慢慢下拉的效果
            dom2[0].childNodes[1].style.display = 'block';
            dom2[0].childNodes[1].style.height = _this.end_y +'px';
            dom2[0].childNodes[1].style.lineHeight = _this.end_y +'px';
        }
   });
   //執行slide_end()函數
   this.slide_end(dom2);
}

（5）編寫slide_end()函數

slide_end:function(dom2){
    var _this = this;
    //監聽touchend事件
    document.addEventListener('touchend',function(evt){
    //當手指送開的時候，判斷手指的滑動距離若是大於100就將 '正在刷新。。' 的效果顯示出來，同時隱藏 '下拉刷新' 的效果
      if(_this.end_y > 100){
          dom2[0].childNodes[1].style.display='none';
          dom2[0].childNodes[0].style.display='block';
          console.log('開始刷新');
          //這裏是模擬3秒後刷新成功，而後隱藏 '正在刷新。。' 效果 
          setTimeout(function(){
              dom2[0].childNodes[0].style.display='none';
          },3000);
      }else{
      //這裏是當手指滑動距離小於100時，就將 '下拉刷新' 效果隱藏。也就是什麼也不作
          dom2[0].childNodes[1].style.display = 'none';
      }
   });
}

（5）最後將Slide構造函數暴露到全局window裏：

window.Slide=Slide;

整個下刷新功能到這了就完了。很簡單吧。
下面是完整的封裝代碼。
;(function(){

function Slide(dom){
    this.start_y=null;
    this.end_y=null;
    this.render(dom);
}
Slide.prototype={
    // 動態建立下拉刷新特效
    render:function(dom){
        var body = document.getElementsByTagName('body');
        var newItem = document.createElement('div');
        newItem.className = 'slide-wrap';
        newItem.innerHTML = '<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>';
        body[0].insertBefore(newItem,dom[0]);
        var dom2 = document.getElementsByClassName('slide-wrap');
        this.slide_start(dom2);
    },
    slide_start:function(dom2){
        var _this = this;
            document.addEventListener('touchstart',function(evt){
                 var touch = evt.touches[0]; //獲取第一個觸點
                 _this.start_y = Number(touch.pageY); 
            });
        _this.slide_move(dom2);
    },
    slide_move:function(dom2){
            var _this = this;
            document.addEventListener('touchmove',function(evt){
                 dom2[0].childNodes[0].style.display='none';
                 var touch = evt.touches[0]; //獲取第一個觸點
                 _this.end_y = Number(touch.pageY) - _this.start_y; 
                 if(_this.end_y > 5){
                     dom2[0].childNodes[1].style.display = 'block';
                     dom2[0].childNodes[1].style.height = _this.end_y +'px';
                     dom2[0].childNodes[1].style.lineHeight = _this.end_y +'px';
                 }
            });
        this.slide_end(dom2);
    },
    slide_end:function(dom2){
        var _this = this;
            document.addEventListener('touchend',function(evt){
                if(_this.end_y > 100){
                    dom2[0].childNodes[1].style.display='none';
                    dom2[0].childNodes[0].style.display='block';
                       console.log('開始刷新');
                    setTimeout(function(){
                        dom2[0].childNodes[0].style.display='none';
                    },3000);
                }else{
                     dom2[0].childNodes[1].style.display = 'none';
                }
            });
    }
}

window.Slide=Slide;
})();

使用方法也很簡單：在你的頁面裏new一個Slide()。而且將主頁面的dom節點傳進去便可。
var target = document.getElementsByClassName('float-box');
new Slide(target);

最後的效果以下圖：
持續下拉的效果：

鬆開手指，正在刷新的效果：

固然，這效果是很醜，由於只是個小demo，因此css樣式很是簡單。大家能夠本身發揮想象力，寫更好看的css樣式便可。