Angularjs 滚动加载更多数据
下面的例子只是为了简单记录怎么使用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; varpigHeight=$(".analysisContainer")[1].children[1].scrollHeight; varujHeight=$(".analysisContainer")[1].children[2].scrollHeight; varboxSummaryHeight=$(".analysisContainer")[1].children[3].scrollHeight; if(index==0){ //$scope.reLoadData=true; pigHeight=0; ujHeight=0; $scope.gridOptions.data=null; } varshowSummaryBox=function(){ $scope.isLoadingBoxSummary=false; } varshowUj=function(){ $scope.isLoadingUJ=false; //$scope.isLoadingSummaryBox=true; //$timeout(showSummaryBox,1000); } varshowPig=function(){ $scope.isLoadingPIG=false; //$scope.isLoadingUJ=false; //$timeout(showUj,10000); } if(pigHeight==0){ $scope.isLoadingPIG=true; $timeout(showPig,1000); }elseif(ujHeight==0){ $scope.isLoadingUJ=true; $timeout(showUj,1000); }elseif(boxSummaryHeight==0){ $scope.isLoadingBoxSummary=true; $timeout(showSummaryBox,1000); } }; }] ).directive('whenScrollEnd',function(){ returnfunction(scope,elm,attr){ varpageWindow=$(this); pageWindow.bind('scroll',function(et,ed,pb){ varwinScrollTop=pageWindow.scrollTop(); varwinHeight=pageWindow.height(); varmaxScrollHeight=$(".analysisContainer")[1].scrollHeight; if((winScrollTop+winHeight)>maxScrollHeight){ scope.$apply(attr.whenScrollEnd); } }); } });
下面是HTML部分:
<divclass="analysisContainer"ng-show="showData"when-scroll-end="LoadingData()"> <divid="b"ng-show="isLoadingPIG"style="width:100%;text-align:center;z-index:1"> <h6class="loading"> <imgsrc="~/Content/Images/loading2.gif"/> LoadingWin&Convertdata... </h6> </div> <divid="a"ng-show="!isLoadingPIG"> <imgsrc="~/2016-03-16_152323.png"/> </div> <divng-show="!isLoadingUJ"> <imgsrc="~/2016-03-16_153347.png"/> </div> <divng-show="!isLoadingBoxSummary"> <imgsrc="~/2016-03-16_153404.png"/> </div> </div>
重要的部分是指令(directive)和滚动时要加载数据的部分。
Angularjs滚动加载更多数据的相关知识,小编就给大家介绍这么多,希望对大家有所帮助!