首页 > 编程 > JavaScript > 正文

Angularjs 滚动加载更多数据

2019-11-20 10:22:44
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表