html5 - ejemplos - meta tags generator

Tire hacia abajo para actualizar el navegador web móvil

Question

Estoy dando soporte móvil para una aplicación web. Tengo un requisito en mi aplicación que despliegue la pantalla para actualizar la página y obtener las últimas actualizaciones. He visto esta característica en aplicaciones nativas de iPhone y también se implementó en sitios móviles de twitter y foursquare.

He visto algunos mensajes aquí, pero no puedo entender qué dicen exactamente. Soy muy nuevo en este entorno. por favor, guíame para hacer esta función.

¿Hay alguna biblioteca javascript o jqueries para esta función?

Answer 1

Básicamente, pull to refresh solo se ha implementado públicamente utilizando mecanismos de desplazamiento javascript pirateados , como iScroll . Así es como Twitter lo está haciendo, con algún tipo de biblioteca de desplazamiento de js webkit css3. Pero, notará incluso en un iPhone 4, el desplazamiento de Twitter en la web móvil es janky y no es 100% natural.

Ayer, escribí un desplazamiento para refrescar el controlador de overflow: scroll componentes de overflow: scroll . Ahora que el iPhone admite el overflow: scroll , no tenemos que secuestrar el desplazamiento por más tiempo. Esto será especialmente cierto cuando Apple corrige el actual iOS -webkit-overflow-scrolling: touch bugs.

Todavía no puedo proporcionar mi código de código abierto, pero aquí está la interfaz para hacerlo, con algunos comentarios.

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

Esta solución funciona en iOS5, Safari, Chrome y probablemente otros. Tuve que usar jQuery en un par de lugares, principalmente animando el pergamino.

Esta solución no requiere un controlador de desplazamiento css3, solo overflow: scroll;

Answer 2

Comience por aprender JavaScript, XHttpRequests y luego toque eventos.

La extracción para actualizar no es más que un desencadenador de llamada XHR (AJAX) que agrega nuevos datos en el elemento seleccionado que desea.

Pero si quiere una respuesta corta, consulte el iScroll 4 de Cubiq en http://cubiq.org/iscroll-4

Mejor desplazamiento JS nunca.

Aquí está el ejemplo: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/