Angular js - 向上滚动加载更多数据 [英] Angular js - On scroll up load more data
问题描述
我开发了一个像 Facebook 这样的聊天系统.现在我想加载较早的消息.任何人都可以帮我做一些功能,比如当我向上滚动时,它应该像 Facebook 一样加载更早的消息.
你可能想看看 ngInfiniteScroll.有了这个模块,就可以很容易地实现你想要的.下面是一个例子:
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'><img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
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 安装 if.
I have developed a chatting system like Facebook. Now I want to do load earlier messages. Can anyone help me to do the functionality like when I scroll up it should load earlier messages same like Facebook.
You may want to take a look at ngInfiniteScroll. With this module, it is very easy to implement what you want. Here is an example:
<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);
}
};
});
If you are using Bower, you can install if with bower install ngInfiniteScroll.
这篇关于Angular js - 向上滚动加载更多数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!