下拉刷新的移动网络浏览器 [英] Pull down to refresh on mobile web browser

问题描述

我给Web应用程序的移动支持。我在我的应用程序，下拉屏幕刷新页面获取最新更新的要求。我已经看到了iPhone本地应用此功能，并且它也是在Twitter和Foursquare的移动网站实现的。

I am giving mobile support for a web application. I have a requirement in my application that pull down screen to refresh the page to get the latest updates. I have seen this feature in iPhone native applications and it was also implemented in twitter and foursquare mobile sites.

我看到这里的一些职位，但我无法确切地了解他们在说什么..
我非常新的这个环境。请指导我做这个功能。

I have seen some posts here but i unable to understand what exactly they are saying.. I am very new to this environment. please guide me in doing this feature.

是否有任何JavaScript库或jqueries是否有此功能？

Is there any javascript libraries or jqueries are there for this feature?

推荐答案

从本质上讲，拉来刷新只被使用的JavaScript劫持的滚动机制，喜欢的 iScroll 。这是Twitter的是怎么做的吧 - 用某种JS的WebKit CSS3滚动库。但是，你在iPhone 4甚至注意到，微博在移动网络滚动janky，而不是100％纯天然。

Essentially, pull to refresh has only been implemented publicly using a hijacked javascript scrolling mechanisms, like iScroll. This is how Twitter is doing it - with some sort of js webkit css3 scrolling library. But, you'll notice even on an iPhone 4, twitter's scrolling in mobile web is janky and not 100% natural.

昨天，我写了一个滚动刷新为处理溢出：滚动组件。现在，iPhone正在支持溢出：滚动，我们没有劫持不再滚动。当苹果修复了iOS的电流-webkit-溢出滚动这将是尤其如此：触摸虫子

Yesterday, I wrote a scroll to refresh handler for overflow: scroll components. Now that iPhone is supporting overflow: scroll, we don't have to hijack the scrolling any longer. This will be especially true when Apple fixes the current iOS -webkit-overflow-scrolling: touch bugs.

我还不能提供我的code源代码开放，但这里做的界面，与一些意见。

I can't yet provide my code open source, but here's the interface to do it, with some comments.

(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在几个地方，主要是动画滚动。

This solution works on iOS5, Safari, Chrome, and probably others. I had to use jQuery in a couple places, mainly animating the scroll.

该解决方案不要求CSS3滚动处理程序，而只是溢出：滚动;

This solution doesn't require a css3 scroll handler, but just overflow: scroll;

这篇关于下拉刷新的移动网络浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！