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 滚动加载更多数据的相关知识,小编就给大家介绍这么多,希望对大家有所帮助!
上一篇: 使用多线程和并发编程(一)