jQuery Mobile listview分页

对于那些仍在寻找长滚动列表解决方案的人来说,这只是一个提示.

–update

我要抱歉我没有时间提前发布一个例子,因为我不允许将我们使用的源代码发布到Internet上.
现在终于我有了自由,并决定花几个小时来重建懒惰加载列表视图(刚从我脑海中浮现).

脚本：

var per_page = 20; //max images per page
var page = 1; //initialize page number
$(document).ready(function () {
    loadFlckr(20,1); //load some images onload
});

//Handler for scrolling toWARD end of document
$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        //End of page,load next content here
        if (!loading) loadNextPage();
    }
});

//Load content for next page
function loadNextPage() {
    loadFlckr(per_page,++pagE);
}

//Load images from Datasource (Flickr in this casE)
function loadFlckr(per_page,pagE) {
    loading = true; //interlock to prevent multiple calls
    $.mobile.loading('show');
    var flickerAPI = "http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&format=json&api_key=2fd4e1a42e243e332b7e334aa219698e&user_id=74038643@N00&jsoncallBACk=?";

    //Calling to service provider
    $.getJSON(flickerAPI,{
        per_page: per_page || 20,page: page || 1
    })
        .done(function (data) {
        $.each(data.photos.photo,function (i,item) {
            var url = String.format("http://farm{0}.staticflickr.com/{1}/{2}_{3}_{4}.jpg",item.farm,item.server,item.id,item.secret,'t');
            var img = $("<img/>").attr("src",url);
            var li = $("<li/>").append(img);
            var title = $("<h2/>").append(item.title || 'No title');
            var desc = $("<p/>").append(item.owner);
            li.append(titlE);
            li.append(desc);
            //Append new list item to listview
            li.appendTo("#list-lazyloader");
        });
        //refresh listview
        $('#list-lazyloader').listview('refresh');
        loading = false;
        $.mobile.loading('hide');
        //update page index
        page = data.photos.page;
        //update photos count
        $('#photoCount').text($('#list-lazyloader li').size());
    });
};

//C#-like feature to concat Strings
String.format = function () {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
        var reg = new RegExp("\\{" + i + "\\}","gm");
        s = s.replace(reg,arguments[i + 1]);
    }
    return s;
}

HTML：

<div data-role="header" data-position="fixed" data-theme="b">
     <h1>Photos (<span id="photoCount">0</span>)</h1>

</div>
<ul id="list-lazyloader" data-role="listview" data-theme="d"></ul>

这是工作小提琴：

Lazy-loading Listview

玩得开心=)

更新于2017年1月8日：修复了损坏的Flickr API,以防公众仍对此解决方案感兴趣