<!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>
angularJS-滚动到底部触发事件
最新推荐文章于 2022-10-09 21:23:41 发布