來一發，網頁下拉刷新

時間 2019-11-19

標籤一發網頁下拉刷新欄目 HTML 简体版

原文原文鏈接

手機APP開發中，下拉刷新是一個很常見的功能，可是在網頁中，這種模式用的不多。網頁下拉刷新，看似簡單的功能，但我在網上並無找到比較好的解決方法，遂本身開發了一個。期間遇到了各類小坑，瀏覽器兼容，各類瀏覽器下拉默認事件，PC端無觸摸事件~。javascript

簡單的效果圖

下拉刷新實現流程

定義初始數據
觸摸開始
觸摸移動過程當中判斷是否處於下拉狀態，標記開始狀態
觸摸過程當中控制提示內容 margin-top與 height 屬性予以呈現
觸摸結束，請求數據
請求數據成功/失敗處理
處理數據，下拉刷新完成

清晰的流程認知很重要，接下來簡單的說明流程html

靜態樣式

下拉刷新須要下拉元素與下拉提示元素
這裏咱們選擇的容器是body,下拉提示元素自定義~java

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

須要注意的是，下拉容器高度不能設置爲0，不然不能爲容器添加觸摸事件git

定義初始數據

開始以前定義一系列初始數據,github

var isValid = false,    // 是否生效
    isTouching = false, // 觸摸中標識
    isEfec = false, // 觸摸是否生效
    isDestory = false,  // 是否銷燬 
    startX, startY, disY = 0,   // 起始觸摸X、y座標， 移動Y座標
    ...

添加觸摸事件chrome

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;  // 滾動條高度大於0
    if(isDestory) return;        // 銷燬狀態
    if(isTouching) return;     // 當前處於觸摸狀態

    isTouching = true;          // 觸摸狀態標標識
    isEfec = true;                  // 觸摸開始生效
    
    var touch = evt.touches[0], //獲取第一個觸點
        x = parseInt(touch.pageX), //頁面觸點X座標
        y = parseInt(touch.pageY); //頁面觸點Y座標

    //記錄觸點初始位置
    startX = x;
    startY = y;
}

這一步惟一須要作的就是記錄開始觸摸點；瀏覽器

觸摸移動過程

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

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

    disY = t;
}

在這一步中須要阻止事件冒泡事件，WAP端的部分瀏覽器會重寫下拉事件，好比chrome與微信中（見下圖）。微信

這裏一大坑是：瀏覽器中下拉默認事件一旦觸發後，就不能再經過冒泡阻止此事件。
chrome瀏覽器中大概是15PX左右的下拉後觸發默認刷新，微信中大概是6像素左右。post

觸摸結束，請求數據

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

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

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

觸摸結束後須要作的是判斷是否進行請求數據，
請求數據成功後，處理數據，重置有關刷新的代碼url

簡單的說明就到此爲止，若是有興趣，能夠從github中下載~