angularJS-滚动到底部触发事件

最新推荐文章于 2022-10-09 21:23:41 发布

艾斯德斯的博客

最新推荐文章于 2022-10-09 21:23:41 发布

阅读量4.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_36898102/article/details/78715976

版权

angularJs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app ="myPro">
	<head>
		<meta charset="UTF-8">
		<title>angularJS-滚动到底部触发事件</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<style>
			*{margin: 0;padding: 0;}
			ol,ul{list-style: none;}
			.box{width: 500px;height: 500px;border: 1px solid gray;margin: 100px auto;overflow-y: auto;}
			.box ul{display: block;width: 100%;height: 40px;line-height: 40px;border-bottom: 1px solid gainsboro;}
			.box ul li{float: left;width: 33.3%;height: 40px;line-height: 40px;text-align: center;}
		</style>
	</head>
	<body ng-controller = "myProController">
		<div class="box" when-scrolled="loadMore()">
			<ul ng-repeat="data in users">
				<li>{{data.name}}</li>
				<li>{{data.age}}</li>
				<li>{{data.address}}</li>
			</ul>
		</div>
	</body>
	<script>
		var pro = angular.module("myPro",[]);
		pro.controller("myProController",["$scope",function($scope){
			$scope.users = [
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},				
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"},
				{"name":"zhangsan","age":"18","address":"北京"}
			];
			
			
			//滚动到底部触发事件
			
			$scope.loadMore = function(){
//				if(count>$scope.bucketTotal){
//					$scope.tip = true;
//				}else{
//					count = count+15;
//					$scope.showTopLoading = true;
//					$scope.showBucketList();
//				};			
				console.log("到底啦!!")
			};
			
		}]);
		
		//滚动指令 
		pro.directive('whenScrolled', function() {  
		    return function(scope, elm, attr) {  
		        // 内层DIV的滚动加载  
		        var raw = elm[0];  
		        elm.bind('scroll', function() { 
		            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { 
		                scope.$apply(attr.whenScrolled);  
		            };  
		        });  
		    };  
		});		
		
		
	</script>
</html>