无限滚动实时数据

Question

我正在尝试在Web应用程序中实现无限滚动，可以在服务器中添加或删除记录，按照其id的字母顺序排序，相关数据也可以随时更改，我必须显示最新数据。我理解无限滚动如何工作以及如何显示固定对象集的最新数据（在我的情况下，重复轮询并在视图中转储数据），但我无法理解如何集成两者。 API使用游标并每次向我发送20条记录。请帮忙

Answer 1

我想我明白你最关心的是什么。实时更新的无限滚动很难实现。你必须通过思考并找出你想要实现的目标。有几种情况需要考虑，为了简化，我们假设我们使用带行的网格：

1. 可见行已更改（编辑）
2. 在可见行（添加）之间添加了一个新行
3. 现有行已从可见行中删除（删除）
4. 已加载的行已更改（编辑）
5. 在之前加载的行之间添加了一个新行，但它们不可见 - 我们向下滚动（添加）
6. 已从已加载的行中删除现有行（删除）
7. 未加载行的任何更改都是微不足道的 - 因为我们仍然需要加载它

我认为这里最大的问题是使用已加载且不可见的行进行操作。对用户而言，所做的任何更改都不可见。既然如此，你考虑过虚拟滚动吗？因此，当用户向上/向下滚动时，仅显示10行并替换它们。如果你真的想要无限滚动，那么好的方法就是通知用户，数据已被更改，你必须重新渲染整个无限滚动。在这种情况下，用户决定刷新已加载的数据。您可以抓住可见的内容并尝试计算要显示给他的内容（以反映添加/删除/编辑的行的先前状态）

Answer 2

基本上，您需要在可滚动容器中设置记录。然后使用一些jquery向下滚动容器，因为从API标注中添加了更多行。

这是我的一些javascript代码，它滚动列表。 css需要设置overflow属性来实现这一点。

   function scrolllist(){


            //get the current width of the screen
            var width = document.body.clientWidth;
            var channelPanelWidth = 120;

            //get the height of the info container of the current video 
            var elem = document.getElementsByClassName("listInfoContainer")[0];


            $('#listContainer').animate({scrollLeft: nextScroll + "px"}, {duration: 1000, specialEasing: { width: 'linear', height: 'easeOutBounce'},
            complete: function (e) {

                //debug print
                //console.log("animation completed");
            }

        }


  #listContainer{
  display: inline-block;
  vertical-align: top;
  width: 196px;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 510px;
  left: 0px;

}

nextscroll变量将控制框滚动的程度。如果你想给它连续滚动的外观，那么你只需要调整持续时间和nextscroll变量，以便在下次更新从API进入时它们没有到达列表的末尾。 / p>

Answer 3

Socket.io或带有无限滚动的Google云消息传递

我自己来这里寻求创意，但因此，如果没有满足您需求的答案，您必须自己即兴创作并提出自己的想法。

典型的无限滚动行为

基本上做无限就是对分页的数据集进行查询，在滚动动量（向上或向下）之前显示行之前获取行。我在我的网站和ios / android中完美地工作。

获得每篇文章的实时

在socket.io中执行此操作并使用＆＃34; room＆＃34;使其正常工作概念，我现在决定转而使用GCM Google Cloud Messaging（或现在的Firebase云消息传递FCM）。

方法

我现在正在做的事情是在动力之前一次获取20条记录，并为用户订阅20个主题（帖子），当他们离开视图时，我取消订阅他们未被观看动量背后的主题。如果动量增量太大，我会禁用它直到它在界限范围内，因为没有必要快速订阅/取消订阅，并且可能被视为对FCM的滥用。

然后，我在页面/设备上有一个哈希查找，我根据帖子ID加载的帖子与订阅的主题相匹配，帖子更新在邮件包上有帖子ID，所以我可以快速更新统计信息基于这种方法的页面/应用程序。

我担心这会使FCM过载，但到目前为止它似乎具有惊人的可扩展性。顺便说一句，Firebase（任何东西）都很不错，但FB DB在查询方面非常有限，这有点令人失望，因此我使用了其他云数据库。