我正在寻找一种方法,在向下滚动后在列表视图的底部添加更多列表.例如,我最初返回20个项目.我打算使用分页,只返回从我的查询返回的数量,但我宁愿返回15-20然后在滚动结束时自动添加更多此列表或有一个按钮说“查看更多” .我是jQuery Mobile的新手,想知道是否有人见过这种事情.这也用在Phonegap中.如果是这样,你能指出我正确的方向吗？非常感谢提前！
解决方法
而不是自动加载更多列表项,我建议放置一个按钮,用户可以点击加载更多(但这只是我的建议).
- //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/
