【问题标题】:How to jump to the end of an "infinite-scroll" viewport?如何跳转到“无限滚动”视口的末尾?
【发布时间】:2016-01-20 00:24:35
【问题描述】:

我正在使用ui-scroll 在我的 Angular 应用程序中实现无限滚动。

它运行良好,我正在使用它来显示事件列表。

但是,当我的应用加载时,它默认显示第一个事件(实际上是索引1)。要查看最近的事件,必须向下滚动事件列表。当事件列表非常大并且有点无法分页加载时,这是一个问题,因为 Web 应用程序必须遍历所有事件才能获取最新的事件。

我如何指示 ui-scroll 从最后的事件开始?显然,我有一个后端方法(一个HEAD 请求,我可以使用它来获取事件的总数)来获取最初想要的索引。我只是找不到将初始索引放入 ui-scroll 的方法。

有什么线索吗?


根据要求,这是一个代码示例,虽然它是非常“标准”的 ui-scroll 东西:

<ul ui-scroll-viewport class="event-list" ng-class="{loading: eventsLoading}">
  <li ui-scroll="event in eventsProvider" data-buffer-size="20" is-loading="eventsLoading">
    <p>event.text</p>
  </li>
</ul>

这是我在控制器中的内容:

$scope.eventsProvider = {
  get: function(index, count, success) {
    $scope.events = ZoneEventsService.query({
      session_type: $scope.session_type,
      zone: $scope.zone,
      offset: index - 1,
      limit: count
    }, function(result) {
      success(result.items);
    });
  }
};

【问题讨论】:

  • 你能展示一个代码示例吗?
  • @DanielNalbach:当然。

标签: angularjs ui-scroll


【解决方案1】:

我实际上找到了一种方法。在我的控制器中,我推迟了数据的第一次加载,并通过事件总数手动偏移了我的偏移量。由于 ui-scroll 可以开箱即用地处理负偏移量,因此它可以正常工作。

$scope.eventsInfo = ZoneEventsService.head({
  session_type: $scope.session_type,
  zone: $scope.zone,
  limit: 0,
});

$scope.eventsProvider = {
  get: function(index, count, success) {
    // The promise will wait the first time around and be resolved already on following calls.
    $scope.eventsInfo.$promise.then(function() {
      $scope.events = ZoneEventsService.query({
        session_type: $scope.session_type,
        zone: $scope.zone,
        // Here goes the magic.
        offset: index - 1 + $scope.eventsInfo.total_count,
        limit: count
      }, function(result) {
        success(result.items);
      });
    });
  }
};

【讨论】:

  • @DanielNalbach 这样做有 2 天的延迟(除非您在问题的同时发布答案)。如果从那以后没有更好的事情发生,我肯定会的!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-04-02
  • 1970-01-01
  • 2019-04-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多