带组标记的无限滚动（jquery/jquery mobile）答案

【问题标题】：infinite scroll with group marker (jquery/jquery mobile)带组标记的无限滚动（jquery/jquery mobile）
【发布时间】：2013-05-04 04:29:50
【问题描述】：

我在不同的应用程序中看到了使用标记实现无限滚动。我认为这些应用程序是用 Objective-c 编写的，但我想知道是否有 jquery 等价物（或 js 库）。

我正在寻找的是一个无限滚动，其中包含一些数据的组标记。例如，显示一天的所有事件。组标记显示“今天”和当天的事件列表。滚动后，显示“明天”的标记并替换“今天”等。

在此处执行此操作的应用示例

是否有一个 jquery 库可以做到这一点？我找不到标记的正确术语（今天，明天），所以这可能是我找不到关于 stackoverflow 的讨论的原因。组标记是描述它的好方法吗？

【问题讨论】：

标签： jquery jquery-mobile jquery-waypoints jquery-mobile-listview

【解决方案1】：

如果我理解正确的话，就可以了。我不知道这是否完全 100% 相似，但很接近。

jQuery Mobile 有一个叫做列表视图分隔符的东西，它们可以动态实现。

假设您从服务器动态提取数据并且列表视图已填充但未刷新。您的列表视图内容如下所示：

<ul data-role="listview" id="MessagesList" data-autodividers="true">
    <li date="2013-03-03"><a href="#">Event 1</a></li>
    <li date="2013-03-02"><a href="#">Event 2</a></li>
    <li date="2013-03-01"><a href="#">Event 3</a></li>
</ul>

现在，在刷新和增强列表视图标记之前，您将初始化自动分隔符的生成，如下所示：

$("#MessagesList").listview({
    autodividers: true,
    autodividersSelector: function (li) {
        var out = li.attr('date');
        return out;
    }
}).listview('refresh');

你会得到这样的东西：jsFiddle

现在，我们已经解决了您的第一个问题。现在，关于你的第二个问题。您可以在名为 Waypoints 的 jQuery 插件的帮助下实现 listview 无限滚动。可以用来检测listview已经到达底部，然后触发一个事件，可以用来拉取另一组动态数据，增强过程会重新开始。

或者你可以看看我的旧示例，看看如何手动完成（我更喜欢这个解决方案而不是航点，它有更好的检测）：jsFiddle

【讨论】：

谢谢你的指点，我要去实验了。至于分隔线，我认为它们是静态的。在所示示例中，分隔线位于顶部。例如，星期一将保持领先，直到我们到达星期二。然后星期一将消失，而星期二将排在首位，直到我们到达另一天。
嘿，谢谢，只是实现它。现在，我看到了你关于 iscrollview 的另一篇文章。为什么不使用 iscrollviews 的 iscroll-pullup 和 pulldown ？我已经尝试过使用它们，但是当我现在使用动态内容向上/向下拉时，我无法让它显示任何东西或做任何事情。
我没有提到他们，因为我帮助过的人通常在使用 iscrollview 时遇到的问题比对他们的帮助要多。这并不意味着 iscrollview 不好，只是需要时间来适应。所有这一切，你是对的，我会用 iscrollview 写一篇教程。我经常使用它，但用于其他目的。