jquery - jQuery Mobile 列表视图分页

Question

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

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

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

Answer 1

好的，我决定制作自己的延迟加载列表视图插件。事实证明，用户体验真的很棒！

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

- 更新

很抱歉，我之前没有时间发布示例，因为我不允许将我们使用的源代码发布到互联网上。现在我终于有空了，决定花几个小时来重建延迟加载的列表视图（我刚想出来）。

脚本：

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>

这是工作的小提琴：

延迟加载列表视图

玩得开心 =)

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

Answer 2

试试这个解决方案：https ://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin （我是这个插件的开发者）

这是一个简单的 jquery 移动列表视图分页插件，基本上在列表末尾添加了一个“显示更多”按钮（列表项计数和标签文本是可配置的），并且每次单击“显示更多”按钮时都会执行 Ajax 调用。还可以与启用的 jquery 移动搜索输入框一起使用，并且也可以进行缓存。