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

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

Answer 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('
' + (count++) + '
'); } $('ul').append(out.join('')).append($loadMore).listview('refresh'); });​ 

这是一个演示： http ： //jsfiddle.net/knuTW/2/

Answer 2

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

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

 // load test data initially for (i=0; i < 20; i++) { $("#list").append($("
" + i + "
z
")); } $("#list").listview('refresh'); // load new data when reached at bottom $('#footer').waypoint(function(a, b) { $("#list").append($("
" + i+++"
z
")); $("#list").listview('refresh'); $('#footer').waypoint({ offset: '100%' }); }, { offset: '100%' });​ 

Answer 3

有一些文章描述了“永远滚动”和“无限滚动”的方法，这听起来像你在问什么。

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

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

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