欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angularjs 滚动加载更多数据

程序员文章站 2022-05-25 14:28:49
下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据,具体的还是需要具体看待: javascript部分的controller app.c...

下面的例子只是为了简单记录怎么使用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 滚动加载更多数据的相关知识,小编就给大家介绍这么多,希望对大家有所帮助!