Szukasz sposobu na dynamiczne dodawanie kolejnych list do dolnej części listy jQuery Mobile Listview

Question

Po przewijaniu w dół szukam sposobu dodania kolejnych list do dolnej części listy. Na przykład na początku mam 20 zwrotów. Zamierzałem użyć paginacji i po prostu wróciłem tyle, ile wróciło z mojego zapytania, ALE wolałbym wrócić 15-20, a następnie na końcu przewijania automatycznie dodawać więcej do tej listy lub mieć przycisk "zobacz więcej" . Jestem nowy w jQuery Mobile i zastanawiam się, czy ktoś widział takie rzeczy zaimplementowane. Jest to również używane w Phonegap. Jeśli tak, to możesz wskazać mi właściwy kierunek? Wielkie dzięki z góry!

Answer 1

Zamiast automatycznie ładować więcej elementów listy, sugeruję umieszczenie przycisku, który użytkownicy mogą dotknąć, aby załadować więcej (ale to tylko moja sugestia).

//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 
     } 
    } 
}); 

Oto demo: http://jsfiddle.net/knuTW/

Aktualizacja

To trochę łatwiej po prostu załadować przycisk, który użytkownik może kranu, wtedy gdy jest na podsłuchu, obciążenie więcej wierszy, a następnie ponownie Dołącz przycisk load-more na końcu listy:

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'); 
});​ 

Oto demo: http://jsfiddle.net/knuTW/2/

Answer 2

Jest przykładem może pomóc:

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

Istnieje kilka artykułów opisujących metody „zawsze przewijać” i „nieskończonego przewijania”, czyli to, co brzmi jak pytasz o .

Ideą jest załadowanie asynchronicznie większej ilości danych, gdy użytkownik przewinie w dół do z góry określonej liczby elementów.

Istnieje znany problem z tą metodą, ponieważ powoduje, że kłamca wychodzi z paska przewijania.

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/