拉下以在移動網絡瀏覽器上刷新

Question

我正在爲Web應用程序提供移動支持。我的應用程序需要下拉屏幕刷新頁面以獲取最新更新。我已經在iPhone原生應用程序中看到過這個功能，並且它也在Twitter和foursquare移動網站中實現。

我在這裏看到一些帖子，但我無法理解他們到底在說什麼.. 我對這個環境很陌生。請指導我做這個功能。

是否有任何JavaScript庫或jQuery的這個功能？

Answer 1

首先學習JavaScript，XHttpRequests然後觸摸事件。

拉動刷新只不過是一個XHR（AJAX）調用的觸發器，用於在所需的所選元素上附加新數據。

但是，如果你想有一個簡短的回答，請Cubiq的iScroll 4在http://cubiq.org/iscroll-4

最佳滾動JS如初。

這裏是例子：http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

Answer 2

從本質上講，拉刷新僅被使用的JavaScript劫持的滾動機制，如公開iScroll實施。 Twitter就是這樣做的 - 用某種js webkit css3滾動庫。但是，即使在iPhone 4上，您也會注意到，在移動網絡上滾動的twitter很笨拙，並非100％自然。

昨天，我寫了一個滾動刷新處理程序的overflow: scroll組件。現在iPhone支持overflow: scroll，我們不必再劫持滾動了。當Apple修復當前的iOS -webkit-overflow-scrolling：touch bugs時，情況尤其如此。

我還不能提供我的代碼開源，但這裏有接口​​來做它，有一些評論。

(function(window, $, undefined) { 

var hasTouch = 'ontouchstart' in window, 
    startEvent = hasTouch ? 'touchstart' : 'mousedown', 
    endEvent = hasTouch ? 'touchend' : 'mouseup'; 

var STATES = { 
    ... 
}; 

var CLASS_NAMES = { 
    ... 
}; 

var PullToReload = function(callback, wrapper, instructionsContent) { 
// create all the dom elements and append the right before a content wrapper, but after a primary main wrapper. 
// <div class="mainWrapper" style="overflow: scroll; height: 600px;"><div class="pullToReloadWrapper"></div><div class="contentWrapper"></div></div> is the markup. 

// Check if the main wrapper's height is bigger than the content wrapper's height. If so, then change the main wrapper height to be the height of the content wrapper. 

// scroll main wrapper by the reload wrapper's height. 

// set state to pull 

// invoke initEvents() 
}; 

PullToReload.prototype.setState = function(state) { 
// set the state of either pull, update, or release. Change CSS classes and content. 
} 
// boiler plate event handling switch 
PullToReload.prototype.handleEvent = function(e) { 
    switch (e.type) { 
    case startEvent: 
     this.start(e); 
     break; 
    case "scroll": 
     this.scroll(e); 
     break; 
    case endEvent: 
     this.end(e); 
     break; 
    } 
}; 

PullToReload.prototype.initEvents = function() { 
// add event listeners for startEvent and endEvent with method "this" 
// calling this in an event listener automatically calls handleEvent() 

}; 

PullToReload.prototype.start = function() { 
    // start listening to on scroll for the wrapper 
}; 

PullToReload.prototype.end = function(e) { 
// remove scroll event listener 
// if the current state is in release, then set state to update and invoke the callback, 
// else the state is in pull, then invoke reset() 

}; 

PullToReload.prototype.scroll = function(e) { 
// if current scroll position is almost to the top, change state to release. 
// else put it back to pull state. 

}; 

PullToReload.prototype.reset = function() {  
// animate scroll to height of reload component. 
// put css classes back to the beginning 
}; 
})(window, jQuery, I); 

此解決方案適用於iOS5，Safari，Chrome和其他人。我不得不在幾個地方使用jQuery，主要是動畫滾動。

該解決方案不需要CSS3滾動處理程序，而只是overflow: scroll;