jQuery Mobile 延迟加载列表项答案

【问题标题】：jQuery Mobile lazy load list itemsjQuery Mobile 延迟加载列表项
【发布时间】：2013-03-14 21:38:57
【问题描述】：

你怎么知道你在 jQuery Mobile 中的列表底部，当到达列表末尾时我需要延迟加载更多结果？

【问题讨论】：

“到达列表末尾时”是什么意思？你的意思是当用户滚动到当前列表的底部时？

标签： javascript jquery jquery-mobile

【解决方案1】：

这里有一个使用scrollstart 和scrollstop 事件的工作示例，这应该会让你朝着正确的方向前进：http://jsfiddle.net/shanabus/LJTJt/

此处的文档页面：http://jquerymobile.com/test/docs/api/events.html

希望这会有所帮助！

更新

在this post 的帮助下，我能够连接一个更好的示例来检测页面底部。如果您的列表视图不在页面底部，这将无法正常工作。检查控制台以获取一些位置调试信息。

http://jsfiddle.net/shanabus/LJTJt/1/

这里它只会在您到达列表底部时添加一个新项目。

【讨论】：

非常感谢，我只是不确定我是否会知道我是否在最后 - 也许有一种方法可以在最后一条记录在视口中时绑定到事件？跨度>
等一下，我有一个更好的例子，它使用元素的高度来做一些检测......

【解决方案2】：

在到达页面底部时加载更多项目的简单代码。

 if ($(window).scrollTop() > $('#page1').height() - 500) {
        eventsElement.append('<li><a href="">Stop</a></li>');
        eventsElement.listview('refresh');
 }

举个例子，

see Code here.

使用 jquery-mobile-iscrollview 会更好。它提供下拉和上拉事件

Git hub link

【讨论】：

这对我来说不是很好（如果你有一个大屏幕）。我的解决方案是： if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) loadMore();
当然，您始终可以通过调整值来自定义窗口高度:)

【解决方案3】：

有一个名为lazyloader 的jq 移动插件会有所帮助。

链接：http://dcarrith.github.com/jquery.mobile.lazyloader

【讨论】：