angularJS通过-【指令】实现滚动到底部加载数据

最新推荐文章于 2023-02-15 10:18:57 发布

峰沙同行

最新推荐文章于 2023-02-15 10:18:57 发布

阅读量849

点赞数 1

CC 4.0 BY-SA版权

分类专栏： AngularJs 文章标签： directive whenScrolled scroll 底部加载 angularjs

本文链接：https://blog.youkuaiyun.com/u013758456/article/details/86487139

AngularJs 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的滚动到底部自动加载更多数据的示例。通过自定义指令和控制器，当用户滚动到页面底部时，会触发加载更多数据的函数，动态更新列表内容。

<!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>