寻找一种将更多列表动态添加到 jQuery Mobile 列表视图底部的方法 [英] Looking for a way to dynamically add more lists to the bottom of jQuery Mobile listview

问题描述

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

解决方案

与其自动加载更多列表项，我建议放置一个按钮，用户可以点击以加载更多(但这只是我的建议).

//设置一个时间间隔，以便我们可以限制 `scroll` 事件处理程序，因为会触发大量的 `scroll` 事件var timer = setInterval(function () {滚动确定 = 真；}, 100),//每十分之一秒运行一次scrollOK = true;//设置标志以检查是否可以运行事件处理程序$(window).bind('scroll', function () {//检查是否可以运行代码如果(滚动确定){//设置标志以便间隔必须重置它以再次运行此事件处理程序滚动确定 = 假；//检查用户是否在页面底部的100px内滚动如果 ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {//现在加载更多列表项，因为用户在页面底部的 100px 内}}});

这是一个演示: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/>

I am looking for a way to add more lists to the bottom of my listview after scrolling down. For instance, I have a return of 20 items initially. I was going to use a pagination and just return as many as come back from my query, BUT I'd rather return 15-20 then at the end of scrolling either automatically add more to this list or have a button saying "view more". I'm new with jQuery Mobile and wondering if anyone has seen this sort of thing implemented. This is also being used in Phonegap. If so can you point me in the right direction? Much thanks in advance!

解决方案

Instead of automatically loading more list-items, I suggest placing a button users can tap to load more (but that's just my suggestion).

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

Here is a demo: http://jsfiddle.net/knuTW/

Update

It's a bit easier to just load a button that the user can tap, then when it's tapped, load more rows and then re-append the load-more button to the end of the list:

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

Here is a demo: http://jsfiddle.net/knuTW/2/

这篇关于寻找一种将更多列表动态添加到 jQuery Mobile 列表视图底部的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！