jQuery Mobile listview分页 [英] jQuery Mobile listview paging

问题描述

在jQuery Mobile listview中处理长列表的有效方法是什么? 以1000个项目为例，一次显示1000个项目将对用户毫无用处.想象一下滚动这么长的列表.

What is the effective way to deal with long list in jQuery Mobile listview? Take 1000 items for example, showing 1000 items all at once would effectively render it useless to user. Just imagine scrolling such a long list.

我正在考虑为列表视图实现自定义分页，除了滚动自己的分页解决方案以外，还有更好的方法吗?

I'm thinking of implementing custom paging for listview, is there better approach other than rolling my own paging solution?

**更新 请在下面用小提琴示例检查我更新的答案

**UPDATE Please check my updated answer with Fiddle example below

推荐答案

好的，我决定制作自己的延迟加载listview插件. 事实证明，这真是很棒的用户体验！

OK, I've decided to make my own lazy-loading listview plugin. And it turned out really great user-experience!

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

Just a tip for those still looking for solution of long scrolling list.

-更新

对不起，我没有时间早些发布示例，因为我不允许将我们使用的源代码发布到Internet上，对此我深表歉意. 现在终于有了自由，决定花几个小时来重建延迟加载的列表视图(刚从我脑海中浮现出来).

I've to say sorry that I didn't have time to post an example earlier, as I'm not allowed to post the source code we used onto the Internet. Now that finally I'm free and decided to spent a few hours to rebuild the lazy-loading listview (freshly out of my head).

脚本:

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>

这是工作中的小提琴:

延迟加载Listview

玩得开心=)

2017年1月8日更新:修复了损坏的Flickr API，以防公众仍然对该解决方案感兴趣的情况

Updated on 1/8/2017: fixed the broken Flickr API in case public still interest in this solution

这篇关于jQuery Mobile listview分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！