寻找一种将更多列表动态添加到 jQuery Mobile 列表视图底部的方法

Posted 2023-05-09

【中文标题】寻找一种将更多列表动态添加到 jQuery Mobile 列表视图底部的方法

【英文标题】：Looking for a way to dynamically add more lists to the bottom of jQuery Mobile listview

【发布时间】：2012-03-26 06:55:51

【问题描述】：

我正在寻找一种在向下滚动后将更多列表添加到列表视图底部的方法。例如，我最初有 20 件商品的退货。我打算使用分页并只返回从我的查询返回的数量，但我宁愿返回 15-20 然后在滚动结束时自动添加更多到这个列表或有一个按钮说“查看更多” .我是 jQuery Mobile 的新手，想知道是否有人见过这种事情的实现。这也被用于Phonegap。如果是这样，你能指出我正确的方向吗？非常感谢！

【参考方案1】：

我建议不要自动加载更多列表项，而是放置一个按钮，用户可以点击以加载更多（但这只是我的建议）。

//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/

【讨论】：

非常感谢贾斯珀！我会试一试。我在想我必须添加一个按钮，但仍然可以。

@urbanrunic 我在答案中添加了 update，以显示使用按钮而不是自动执行此操作是多么容易。

谢谢贾斯珀！我遇到了不想工作的无限滚动问题。可能是我必须使用的多页设计。但我会用按钮试试这个:)

这很好用，除了我遇到的问题是“加载更多”按钮正在成倍增加而不是附加到末尾。如果你愿意，我可以在这里粘贴代码

@urbanrunic 您应该创建另一个问题。如果你用jQuery-Mobile标记它，我会看到它，否则在这里发布一个链接。

【参考方案2】：

这个例子可能会有所帮助：

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

【讨论】：

是的，这正是我正在寻找的......你在那个例子中所拥有的。我会让你知道它是如何工作的:)

你能详细说明你小提琴中的代码吗？也许是插件网站的链接？

waypoint 是一个非常简单的插件，只要您到达（向下滚动）选择器元素就会触发一个事件。查看imakewebthings.com/jquery-waypoints和github.com/imakewebthings/jquery-waypoints了解更多详情

【参考方案3】：

有几篇文章描述了“永久滚动”和“无限滚动”的方法，这听起来像是您要问的。

它们背后的想法是当用户从底部向下滚动到预定数量的项目时异步加载更多数据。

不过，该方法存在一个已知问题，因为它会使滚动条本身成为骗子。

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

【讨论】：

啊，谢谢@jefferyhamby。我将通读这些链接。我认为这将非常好，但正如我所提到的，可能只需要在列表底部使用“查看更多”按钮即可。