下拉刷新移动网络浏览器[关闭]

Question

我正在为 Web 应用程序提供移动支持。我的应用程序要求下拉屏幕以刷新页面以获取最新更新。我在 iPhone 原生应用程序中看到了这个功能，它也在 twitter 和foursquare 移动网站中实现。

我在这里看到了一些帖子，但我无法理解他们到底在说什么.. 我对这个环境很陌生。请指导我执行此功能。

此功能是否有任何 javascript 库或 jquery？

Answer 1

本质上，拉动刷新只是使用劫持的 javascript 滚动机制公开实现的，例如 iScroll。这就是 Twitter 的做法——使用某种 js webkit css3 滚动库。但是，即使在 iPhone 4 上，您也会注意到，twitter 在移动网络中的滚动很卡，而且不是 100% 自然的。

昨天，我为overflow: scroll 组件编写了一个滚动刷新处理程序。现在 iPhone 支持overflow: scroll，我们不必再劫持滚动了。当 Apple 修复当前 iOS -webkit-overflow-scrolling: touch 错误时尤其如此。

我还不能提供我的代码开源，但这里是实现它的接口，带有一些 cmets。

(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;

Answer 2

从学习 JavaScript、XHttpRequests 开始，然后是触摸事件。

拉动刷新只不过是 XHR (AJAX) 调用的触发器，它将新数据附加到所需的选定元素上。

但如果您想要一个简短的答案，请查看 Cubiq 的 iScroll 4，地址为 http://cubiq.org/iscroll-4

有史以来最好的滚动 JS。

示例如下：http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/