Alla ricerca di un modo per aggiungere dinamicamente più elenchi in fondo a jQuery Mobile listview

Question

Sto cercando un modo per aggiungere altri elenchi in fondo alla mia listview dopo averlo fatto scorrere verso il basso. Ad esempio, ho un ritorno di 20 articoli inizialmente. Avevo intenzione di usare una paginazione e di restituire solo tanti quanti ne sono tornati dalla mia query, MA preferirei tornare tra 15 e 20 alla fine dello scorrimento o aggiungere automaticamente più a questa lista o avere un pulsante che dice "visualizza di più" . Sono nuovo con jQuery Mobile e mi chiedo se qualcuno ha visto questo genere di cose implementate. Anche questo viene utilizzato in PhoneGap. Se è così puoi indicarmi la giusta direzione? Molte grazie in anticipo!

Answer 1

Invece di caricare automaticamente più voci di elenco, suggerisco di posizionare un pulsante che gli utenti possono toccare per caricare altro (ma questo è solo il mio suggerimento).

//setup an interval so we can throttle the `scroll` event handler since there will be tons of `scroll` events fired 
var timer = setInterval(function() { 
     scrollOK = true; 
    }, 100),//run this every tenth of a second 
    scrollOK = true;//setup flag to check if it's OK to run the event handler 
$(window).bind('scroll', function() { 

    //check if it's OK to run code 
    if (scrollOK) { 

     //set flag so the interval has to reset it to run this event handler again 
     scrollOK = false; 

     //check if the user has scrolled within 100px of the bottom of the page 
     if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) { 
      //now load more list-items because the user is within 100px of the bottom of the page 
     } 
    } 
}); 

Ecco una demo: http://jsfiddle.net/knuTW/

Aggiornamento

E 'un po' più facile da caricare solo un pulsante che l'utente può toccare, poi, quando è sfruttato, caricare più file e poi ri-accodamento il pulsante load-more alla fine della lista:

var $loadMore = $('ul').children('.load-more'); 
$loadMore.bind('click', function() { 
    var out = []; 
    for (var i = 0; i < 10; i++) { 
     out.push('<li>' + (count++) + '</li>'); 
    } 
    $('ul').append(out.join('')).append($loadMore).listview('refresh'); 
});​ 

Ecco una demo: http://jsfiddle.net/knuTW/2/

Answer 2

Questo è esempio può dare una mano:

http://jsfiddle.net/dhavaln/nVLZA/

// load test data initially 
for (i=0; i < 20; i++) { 
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>")); 
} 
$("#list").listview('refresh'); 


// load new data when reached at bottom 
$('#footer').waypoint(function(a, b) { 
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i+++"</h3><p>z</p></a></li>")); 
    $("#list").listview('refresh'); 
    $('#footer').waypoint({ 
     offset: '100%' 
    }); 
}, { 
    offset: '100%' 
});​ 

Answer 3

ci sono un paio di articoli che descrivono i metodi per "per sempre scorrere" e "scroll infinito", che è quello che suona come stai chiedendo .

L'idea dietro di loro è di caricare più dati in modo asincrono quando l'utente scorre verso il basso fino a un numero predeterminato di elementi dal basso.

C'è un problema noto con quel metodo, tuttavia, in quanto rende un bugiardo dalla barra di scorrimento stessa.

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://masonry.desandro.com/demos/infinite-scroll.html
http://designbeep.com/2011/08/12/12-jquery-infinite-scrollingscroll-read-plugins-for-content-navigation/ http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/