來一發，網頁下拉刷新

本文轉載自查看原文 2015-11-12 13:14 2065 下拉刷新/ jQuery/ Web隨筆/ Html5

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

簡單的效果圖

下拉刷新效果圖

下拉刷新實現流程

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

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

靜態樣式

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

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

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

定義初始數據

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

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

添加觸摸事件

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瀏覽器默認下拉刷新
微信中默認下拉顯示網頁信息
這里一大坑是：瀏覽器中下拉默認事件一旦觸發后，就不能再通過冒泡阻止此事件。
chrome瀏覽器中大概是15PX左右的下拉后觸發默認刷新，微信中大概是6像素左右。

觸摸結束，請求數據

// 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
    });
}

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

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