无限滚动与组标记（jquery / jquery mobile）

Question

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

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

此处的应用示例

有没有jquery库这样做？我找不到标记的正确术语（今天，明天），这也许就是为什么我找不到有关stackoverflow的讨论。群组标记是描述它的好方法吗？

Answer 1

如果我理解正确，可以做到。我不知道这是否完全100％相似，但它很接近。

jQuery Mobile有一个叫做listview分频器的东西，它们可以动态实现。

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

<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>

现在，在刷新和增强listview标记之前，您将初始化autidividers的生成，如下所示：

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

你会得到这样的结果： jsFiddle

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

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