jQuery Mobile 列表视图分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14621871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile listview paging
提问by Kagawa
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.
在 jQuery Mobile listview 中处理长列表的有效方法是什么？以 1000 个项目为例，一次显示 1000 个项目将有效地使其对用户无用。想象一下滚动这么长的列表。
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
**更新请使用下面的小提琴示例检查我更新的答案
回答by Kagawa
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.
对于那些仍在寻找长滚动列表解决方案的人来说，这只是一个提示。
--UPDATE
- 更新
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).
我必须说抱歉，我之前没有时间发布示例，因为我不允许将我们使用的源代码发布到 Internet 上。现在终于有空了，我决定花几个小时来重建延迟加载的列表视图（刚刚从我的脑海中消失）。
SCRIPT:
脚本：
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:
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>
And here's the working Fiddle:
这是工作的小提琴：
Have fun =)
玩得开心=)
Updated on 1/8/2017: fixed the broken Flickr API in case public still interest in this solution
2017 年 1 月 8 日更新：修复了损坏的 Flickr API，以防公众仍然对此解决方案感兴趣
回答by Staker
Try this solution: https://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin(I am the developer of this plugin)
试试这个解决方案：https: //github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin（我是这个插件的开发者）
It's a simple jquery mobile listview pagination plugin that basically adds a "Show More" button to the end of a list (list item count and label text are configurable) and does an Ajax call each time the "Show More" button is clicked. Also works with the jquery mobile Search input box enabled and does caching as well.
这是一个简单的 jquery 移动列表视图分页插件，它基本上会在列表末尾添加一个“显示更多”按钮（列表项计数和标签文本是可配置的），并且每次单击“显示更多”按钮时都会执行一次 Ajax 调用。也适用于启用 jquery 移动搜索输入框并进行缓存。
