來一發(fā)，網(wǎng)頁下拉刷新

手機(jī)APP開發(fā)中悉盆，下拉刷新是一個(gè)很常見的功能盯荤，但是在網(wǎng)頁中，這種模式用的很少焕盟。網(wǎng)頁下拉刷新秋秤，看似簡單的功能，但我在網(wǎng)上并沒有找到比較好的解決方法脚翘，遂自己開發(fā)了一個(gè)灼卢。期間遇到了各種小坑，瀏覽器兼容来农，各種瀏覽器下拉默認(rèn)事件鞋真，PC端無觸摸事件~。

簡單的效果圖

下拉刷新效果圖

下拉刷新實(shí)現(xiàn)流程

定義初始數(shù)據(jù)
觸摸開始
觸摸移動(dòng)過程中判斷是否處于下拉狀態(tài)沃于，標(biāo)記開始狀態(tài)
觸摸過程中控制提示內(nèi)容 margin-top與 height 屬性予以呈現(xiàn)
觸摸結(jié)束涩咖，請求數(shù)據(jù)
請求數(shù)據(jù)成功/失敗處理
處理數(shù)據(jù)，下拉刷新完成

清晰的流程認(rèn)知很重要繁莹，接下來簡單的說明流程

靜態(tài)樣式

下拉刷新需要下拉元素與下拉提示元素
這里我們選擇的容器是body,下拉提示元素自定義~

<body>
     <div class="refreshing">
             <!-- 刷新提示元素 -->
     </div>
</body>

需要注意的是檩互，下拉容器高度不能設(shè)置為0，否則不能為容器添加觸摸事件

定義初始數(shù)據(jù)

開始之前定義一系列初始數(shù)據(jù),

var isValid = false,    // 是否生效
    isTouching = false, // 觸摸中標(biāo)識(shí)
    isEfec = false, // 觸摸是否生效
    isDestory = false,  // 是否銷毀 
    startX, startY, disY = 0,   // 起始觸摸X蒋困、y坐標(biāo)盾似， 移動(dòng)Y坐標(biāo)
    ...

添加觸摸事件

document.body.addEventListener('touchstart', touchStart, false);
document.body.addEventListener('touchmove', touchMove, false);
document.body.addEventListener('touchend', touchEnd, false);

開始觸摸

var touchStart = function(evt) {
    var scrollTop = parseInt($el.scrollTop());
    
    if(scrollTop > 0) return;  // 滾動(dòng)條高度大于0
    if(isDestory) return;        // 銷毀狀態(tài)
    if(isTouching) return;     // 當(dāng)前處于觸摸狀態(tài)

    isTouching = true;          // 觸摸狀態(tài)標(biāo)標(biāo)識(shí)
    isEfec = true;                  // 觸摸開始生效
    
    var touch = evt.touches[0], //獲取第一個(gè)觸點(diǎn)
        x = parseInt(touch.pageX), //頁面觸點(diǎn)X坐標(biāo)
        y = parseInt(touch.pageY); //頁面觸點(diǎn)Y坐標(biāo)

    //記錄觸點(diǎn)初始位置
    startX = x;
    startY = y;
}

這一步唯一需要做的就是記錄開始觸摸點(diǎn)；

觸摸移動(dòng)過程

var touchMove = function(evt) {
    var $loadingEl = $loadingEl,
        touch = evt.touches[0], //獲取第一個(gè)觸點(diǎn)
        x = parseInt(touch.pageX), //頁面觸點(diǎn)X坐標(biāo)
        y = parseInt(touch.pageY), //頁面觸點(diǎn)Y坐標(biāo)
        t = y - startY;         // 觸摸距離

    // 距離必須大于靈敏距離觸摸才生效
    if(!isValid && t > options.startPX) {
        isValid = true;
    }
    
    // 阻止事件冒泡
    evt.preventDefault();   
   
   // 省略幾行代碼
    ...

    disY = t;
}

在這一步中需要阻止事件冒泡事件，WAP端的部分瀏覽器會(huì)重寫下拉事件零院，比如chrome與微信中（見下圖）溉跃。

chrome瀏覽器默認(rèn)下拉刷新

微信中默認(rèn)下拉顯示網(wǎng)頁信息

這里一大坑是：瀏覽器中下拉默認(rèn)事件一旦觸發(fā)后，就不能再通過冒泡阻止此事件告抄。
chrome瀏覽器中大概是15PX左右的下拉后觸發(fā)默認(rèn)刷新撰茎，微信中大概是6像素左右。

觸摸結(jié)束打洼，請求數(shù)據(jù)

// touchend事件
var touchEnd = function(evt) {

    isValid = false;
    isEfec = false;
    disY = 0;

    var $loadingEl = options.$loadingEl,
        touch = evt.touches[0] || evt.changedTouches[0],    //獲取第一個(gè)觸點(diǎn)
        y = parseInt(touch.pageY),  //頁面觸點(diǎn)Y坐標(biāo)
        t = y - startY;
       
   // Do some thing ...
  
   $.post(options.url, sendData, function(response, textStatus, xhr) {
        // Do something 
    }).error(function(){
        // Do something
    });
}

觸摸結(jié)束后需要做的是判斷是否進(jìn)行請求數(shù)據(jù)龄糊，
請求數(shù)據(jù)成功后，處理數(shù)據(jù)募疮，重置有關(guān)刷新的代碼

簡單的說明就到此為止炫惩，如果有興趣，可以從github中下載~

來一發(fā)置蜀，網(wǎng)頁下拉刷新