当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angularjs 滚动加载更多数据

Angularjs 滚动加载更多数据

2018年06月17日  | 移动技术网IT编程  | 我要评论

下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据，具体的还是需要具体看待:

javascript部分的controller

app.controller('analysizerctrl', ['$scope', '$timeout', '$window',
function ($scope, $timeout, $window) {
$scope.showdata = false;
$scope.isloadingpig = false;
$scope.isloadinguj = false;
$scope.isloadingboxsummary = false;
$scope.loadingdata = function (index) {
$scope.showdata = true;
var pigheight = $(".analysiscontainer")[1].children[1].scrollheight;
var ujheight = $(".analysiscontainer")[1].children[2].scrollheight;
var boxsummaryheight = $(".analysiscontainer")[1].children[3].scrollheight;
if (index == 0) {
//$scope.reloaddata = true;
pigheight = 0;
ujheight = 0;
$scope.gridoptions.data = null;
}
var showsummarybox = function () {
$scope.isloadingboxsummary = false;
}
var showuj = function () {
$scope.isloadinguj = false;
//$scope.isloadingsummarybox = true;
//$timeout(showsummarybox, 1000);
}
var showpig = function () {
$scope.isloadingpig = false;
//$scope.isloadinguj = false;
//$timeout(showuj, 10000);
}
if (pigheight == 0) {
$scope.isloadingpig = true;
$timeout(showpig, 1000);
} else if (ujheight == 0) {
$scope.isloadinguj = true;
$timeout(showuj, 1000);
} else if (boxsummaryheight == 0) {
$scope.isloadingboxsummary = true;
$timeout(showsummarybox, 1000);
}
};
}]
).directive('whenscrollend', function () {
return function (scope, elm, attr) {
var pagewindow = $(this);
pagewindow.bind('scroll', function (et, ed, pb) {
var winscrolltop = pagewindow.scrolltop();
var winheight = pagewindow.height();
var maxscrollheight = $(".analysiscontainer")[1].scrollheight;
if ((winscrolltop + winheight) > maxscrollheight) {
scope.$apply(attr.whenscrollend);
}
});
}
});

下面是html部分：

<div class="analysiscontainer" ng-show="showdata" when-scroll-end="loadingdata()">
<div id="b" ng-show="isloadingpig" style="width: 100%; text-align: center; z-index: 1">
<h6 class="loading">
<img src="~/content/images/loading2.gif" />
loading win & convert data...
</h6>
</div>
<div id="a" ng-show="!isloadingpig">
<img src="~/2016-03-16_152323.png" />
</div>
<div ng-show="!isloadinguj">
<img src="~/2016-03-16_153347.png" />
</div>
<div ng-show="!isloadingboxsummary">
<img src="~/2016-03-16_153404.png" />
</div>
</div>

重要的部分是指令(directive)和滚动时要加载数据的部分。

angularjs 滚动加载更多数据的相关知识，小编就给大家介绍这么多，希望对大家有所帮助！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网