从AngularJS的顶部(反向)无限滚动

发布时间：2020-12-17 07:45:32 所属栏目：安全来源：网络整理

导读：我正在努力做一个反向的无限滚动.我有一个评论列表,我收到最近10个最新的评论,并希望用户能够向上滚动以检索下一个10 – 类似于FB,它显示最近的评论与’获取上一个’链接,但通过滚动事件而不是链接. 我从http://jsfiddle.net/vojtajina/U7Bz9/开始,尝试将其

我正在努力做一个反向的无限滚动.我有一个评论列表,我收到最近10个最新的评论,并希望用户能够向上滚动以检索下一个10 – 类似于FB,它显示最近的评论与’获取上一个’链接,但通过滚动事件而不是链接.

我从http://jsfiddle.net/vojtajina/U7Bz9/开始,尝试将其修改为一个反向的无限滚动,很快就结束了这样的事情：

function Main($scope,$timeout) {
    $scope.items = [];

    var counter = 0;
    $scope.loadMore = function() {
      // simulate an ajax request
      $timeout( function() {
        for (var i = 0; i < 5; i++) {
          $scope.items.unshift({id: counter});
          counter += 10;
        }},1000);
    };

    $scope.loadMore();
  }

  angular.module('scroll',[]).directive('whenScrolled',['$timeout',function($timeout) {
    return function(scope,elm,attr) {
      var raw = elm[0];

      $timeout(function() {
        raw.scrollTop = raw.scrollHeight;
      },1100);

      elm.bind('scroll',function() {
        // note: if test for < 100 get into infinite loop due to 
        // the delayed render
        if (raw.scrollTop === 0) {
          var sh = raw.scrollHeight
          scope.$apply(attr.whenScrolled);
          // the items are not loaded and rendered yet,so
          // this math doesn't work
          raw.scrollTop = raw.scrollHeight - sh;
        }
      });
    };
  }]);
  ?

http://jsfiddle.net/digger69/FwWqb/2/

问题是,当检索到接下来的10个项目时,它们被添加到列表的顶部,并重新呈现整个列表,并且列表中的项目被完全滚动到视图之外.在小提琴物品“40”在顶部,当您滚动(向下轻微),然后向上触发滚动,项目“90”在顶部.我正在寻找一个很好的策略,在“渲染”之后将“40”保留在滚动区域的顶部.

注意：在小提琴中,我可以通过在滚动事件中保存顶部的li并调用scrollIntoView()直到我添加了超时来模拟ajax调用来使其工作.在超时之前,在请求回来之前,顶部的li被滚动到视图中,并且渲染了新的元素：

var top = elm.find("li")[0];
scope.$apply(attr.whenScrolled);
top.scrollIntoView();

你可以尝试这样的： http://jsfiddle.net/mNFmf/4/

这将滚动到div的底部：

$timeout(function() {
    raw.scrollTop = raw.scrollHeight;          
});

这将使div不会滚动到列表中的第一个项目：

var sh = raw.scrollHeight
scope.$apply(attr.whenScrolled);
raw.scrollTop = raw.scrollHeight - sh;

更新

要克服ajax请求问题,请尝试使用promises.

http://jsfiddle.net/mNFmf/8/

装载机看起来像这样：

$scope.loadMore = function() {
  var deferred = $q.defer();

  // do ajax request here and after getting the result call:   
  deferred.resolve();

  return deferred.promise;
};

另一方面：

loadMore.then(function() { 
  /* do whatever you want after the ajax request has been fulfilled */ 
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!