Angularjs 滚动加载更多数据
2019/6/27 22:30:44
本文主要是介绍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; 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 滚动加载更多数据的相关知识,小编就给大家介绍这么多,希望对大家有所帮助!
这篇关于Angularjs 滚动加载更多数据的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-28Vue入门教程:从零开始搭建第一个Vue项目
- 2024-12-28Vue CLI入门指南:快速搭建Vue项目
- 2024-12-28Vue3基础知识入门教程
- 2024-12-28Vue3公共组件开发与使用入门教程
- 2024-12-28Vue CLI学习:新手入门教程
- 2024-12-28Vue CLI学习:轻松入门与实践指南
- 2024-12-28Vue3公共组件学习入门指南
- 2024-12-28Vue3公共组件学习:从入门到上手实战
- 2024-12-28Vue3学习:从入门到初级实战教程
- 2024-12-28Vue3学习:新手入门与初级教程