Вопрос по cordova, jquery, listview, dynamically-generated, jquery-mobile – Ищите способ динамически добавлять больше списков в конец списка jQuery Mobile

7

Я ищу способ добавить больше списков в конец моего списка после прокрутки вниз. Например, у меня изначально есть возврат 20 предметов. Я собирался использовать нумерацию страниц и просто возвращать столько, сколько вернулось из моего запроса, НО я бы предпочел вернуть 15-20, а затем в конце прокрутки либо автоматически добавить больше в этот список, либо иметь кнопку с надписью «просмотреть больше» , Я новичок в jQuery Mobile и задаюсь вопросом, видел ли кто-нибудь подобное реализованное. Это также используется в PhoneGap. Если да, можете ли вы указать мне правильное направление? Большое спасибо заранее!

Ваш Ответ

3   ответа
0

описывающих методы для «вечной прокрутки» и «бесконечной прокрутки», о чем вы, похоже, и спрашиваете.

Идея, стоящая за ними, заключается в том, чтобы асинхронно загружать больше данных, когда пользователь прокручивает список до заданного количества элементов снизу.

Однако у этого метода есть известная проблема: он делает лжеца из полосы прокрутки.

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/

Ааа, спасибо @jefferyhamby. Я прочитаю эти ссылки. Я думаю, это было бы очень неплохо, но, как я уже говорил, нужно просто нажать кнопку «Просмотреть больше» внизу списка. tjoenz
18

чтобы автоматически загружать больше элементов списка, я предлагаю разместить кнопку, которую пользователи могут нажать, чтобы загрузить больше (но это только мое предложение).

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

Вот демо:http://jsfiddle.net/knuTW/

Обновить

Немного проще просто загрузить кнопку, которую пользователь может нажать, затем, когда она нажата, загрузить больше строк, а затем снова добавитьload-more Кнопка до конца списка:

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

Вот демо:http://jsfiddle.net/knuTW/2/

Это прекрасно работает, за исключением того, что у меня возникла проблема с моим случаем, когда кнопка «Загрузить еще» умножается и не добавляется в конец. Я могу вставить код здесь, если вы хотите tjoenz
@urbanrunic я добавилОбновить на мой ответ, чтобы показать, как легко это сделать с помощью кнопки, а не автоматически. Jasper
Спасибо Джаспер! У меня проблемы с бесконечным свитком, не желающим работать. Может быть, это многостраничный дизайн, с которым мне приходится работать. Но я попробую это с кнопкой :) tjoenz
Большое спасибо Джаспер! Я приведу это в движение. Я думал, что мне придется добавить кнопку, и все еще может. tjoenz
@urbanrunic Вы должны создать еще один вопрос. Если вы пометите егоjQuery-Mobile тогда я увижу это, иначе разместите ссылку на это здесь. Jasper
3

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%'
});​
Не могли бы вы уточнить код в вашей скрипке? Возможно, ссылка на сайт плагина? Jasper
waypoint - это действительно простой плагин, который запускает событие всякий раз, когда вы достигаете (прокручиваете вниз) до элемента селектора. проверитьimakewebthings.com/jquery-waypoints а такжеgithub.com/imakewebthings/jquery-waypoints для более подробной информации dhaval
Да, это именно то, что я искал ... что вы имеете в этом примере. Я дам вам знать, как это работает :) tjoenz

Похожие вопросы