【问题标题】:Angular js - On scroll up load more dataAngular js - 向上滚动加载更多数据
【发布时间】:2015-09-21 05:20:41
【问题描述】:

我开发了一个像 Facebook 这样的聊天系统。现在我想加载早期的消息。谁能帮我做一些功能,比如当我向上滚动时,它应该像 Facebook 一样加载早期的消息。

【问题讨论】:

    标签: angularjs angularjs-directive infinite-scroll


    【解决方案1】:

    您可能想看看ngInfiniteScroll。有了这个模块,很容易实现你想要的。这是一个例子:

    <div ng-app='myApp' ng-controller='DemoController'>
      <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
        <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
      </div>
    </div>
    
    var myApp = angular.module('myApp', ['infinite-scroll']);
    myApp.controller('DemoController', function($scope) {
      $scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
    
      $scope.loadMore = function() {
        var last = $scope.images[$scope.images.length - 1];
        for(var i = 1; i <= 8; i++) {
          $scope.images.push(last + i);
        }
      };
    });
    

    如果你使用Bower,你可以安装bower install ngInfiniteScroll.

    【讨论】:

    • 是的,你是对的,但我想在向上滚动时添加数据。ngInfiniteScroll 可以吗?
    • 不,这是不可能的,不幸的是 :( 我发现 github.com/LightZam/zInfiniteScroll 有效,但我无法让滚动条在加载更多时保持原位
    • @Horse 你可以为我创建问题来描述你的问题吗?
    • 各位,有没有办法用 ngInfiniteScroll 180 度变换元素?所以它对于向上滚动很有用。你觉得有可能吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-11
    • 2020-01-31
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多