<!DOCTYPE html>
<html ng-app="myPro">
<head>
<meta charset="UTF-8">
<title>angularJS-滚动到底部触发事件</title>
<script src="https://cdn.bootcss.com/angular.js/1.0.8/angular.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": "喜峰1", "age": "100", "address": "上海" },
{ "name": "喜峰2", "age": "200", "address": "上海" },
{ "name": "喜峰3", "age": "300", "address": "上海" },
{ "name": "喜峰4", "age": "400", "address": "上海" },
{ "name": "喜峰5", "age": "500", "address": "上海" },
{ "name": "喜峰6", "age": "600", "address": "上海" },
{ "name": "喜峰7", "age": "700", "address": "上海" },
{ "name": "喜峰8", "age": "800", "address": "上海" }
];
//滚动到底部触发事件
var pageSize = 0;
$scope.loadMore = function () {
pageSize++;
var obj ={ "name": "新丰18", "age": "18", "address": "上海" };
for(var i = 0; i < pageSize; i++){
obj.age = i;
$scope.users.push(obj)
}
console.log ("滚动到底出发!!");
console.info(pageSize);
};
} ]);
//滚动指令
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通过-【指令】实现滚动到底部加载数据
猜你喜欢
转载自blog.csdn.net/u013758456/article/details/86487139
今日推荐
周排行