手機(jī)APP開發(fā)中，下拉刷新是一個很常見的功能，但是在網(wǎng)頁中，這種模式用的很少。網(wǎng)頁下拉刷新，看似簡單的功能，但我在網(wǎng)上并沒有找到比較好的解決方法，遂自己開發(fā)了一個。期間遇到了各種小坑，瀏覽器兼容，各種瀏覽器下拉默認(rèn)事件，PC端無觸摸事件~。
簡單的效果圖
下拉刷新效果圖
下拉刷新實現(xiàn)流程
- 定義初始數(shù)據(jù)
- 觸摸開始
- 觸摸移動過程中判斷是否處于下拉狀態(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)識
isEfec = false, // 觸摸是否生效
isDestory = false, // 是否銷毀
startX, startY, disY = 0, // 起始觸摸X、y坐標(biāo)， 移動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; // 滾動條高度大于0
if(isDestory) return; // 銷毀狀態(tài)
if(isTouching) return; // 當(dāng)前處于觸摸狀態(tài)
isTouching = true; // 觸摸狀態(tài)標(biāo)標(biāo)識
isEfec = true; // 觸摸開始生效
var touch = evt.touches[0], //獲取第一個觸點
x = parseInt(touch.pageX), //頁面觸點X坐標(biāo)
y = parseInt(touch.pageY); //頁面觸點Y坐標(biāo)
//記錄觸點初始位置
startX = x;
startY = y;
}
這一步唯一需要做的就是記錄開始觸摸點；
觸摸移動過程
var touchMove = function(evt) {
var $loadingEl = $loadingEl,
touch = evt.touches[0], //獲取第一個觸點
x = parseInt(touch.pageX), //頁面觸點X坐標(biāo)
y = parseInt(touch.pageY), //頁面觸點Y坐標(biāo)
t = y - startY; // 觸摸距離
// 距離必須大于靈敏距離觸摸才生效
if(!isValid && t > options.startPX) {
isValid = true;
}
// 阻止事件冒泡
evt.preventDefault();
// 省略幾行代碼
...
disY = t;
}
在這一步中需要阻止事件冒泡事件，WAP端的部分瀏覽器會重寫下拉事件，比如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], //獲取第一個觸點
y = parseInt(touch.pageY), //頁面觸點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中下載~
相關(guān)
下載地址: https://github.com/pyrinelaw/p-pull-refresh
演示地址: http://pyrinelaw.github.io/p-pull-refresh
Drag介紹文檔: http://www.w3schools.com/tags/ev_ondrag.asp
