今天来跟大家分享一个小的demo，一般网页浏览到底部的时候会有一个点击加载更多的按钮，之前一直纠结怎么写这个，今天学习angular时发现可以用组件来实现这么一个小的效果，大家有兴趣的话可以看一下。
点击加载更多，代码如下：
<!DOCTYPE html> <html ng-app="indexApp">//绑定模块 <head> <meta charset="UTF-8"> <title></title> <style> #fixed{ height: 500px; overflow: auto; } </style> <script src="../js/angular.1.5.6.js"></script>//引入angular库 <script> var app = angular.module('indexApp',[]);//定义模块 app.controller('indexCtrl',['$scope',function($scope){//定义控制器 $scope.items = ['a','b']; for(var i=0;i<=30;i++){ $scope.items.push(Math.random()*10); } $scope.loca = function(){ for(var j=0;j<=10;j++){ $scope.items.push(Math.random()*10); } } }]); app.directive('ngScroll',function(){//组件 return { template:'<ul><li ng-repeat="item in items">{{item}}</li></ul>', } }); </script> </head> <body> <div ng-controller="indexCtrl"> <div id="fixed" ng-scroll=""></div><!--指令的方式--> <button ng-click="loca()">查看更多</button> </div> </body> </html>
滑动到底部自动加载：
<!DOCTYPE html>
<html ng-app="loadMoreApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#fixed {
height: 500px;
overflow: auto;/*溢出显示滚动条*/
}
</style>
<body>
<div ng-controller="indexCtrl">
<div id="fixed" ng-scroll="loadMore()"><!--指令的方式-->
</div>
</div>
</body>
<script src="js/angular.js"></script>
<script>
var app = angular.module('loadMoreApp', []);//定义一个模块
app.controller('indexCtrl', ['$scope', function($scope) {//定义一个控制器
$scope.items = ['a', 'b'];
var i = 0;
for(; i <= 30; i++) {
$scope.items.push(Math.random() * 10);//生成随机数，加到items这个数组后
}
$scope.loadMore = function() {
var j = 0;
for(; j <= 10; j++) {
$scope.items.push(Math.random() * 10);
}
}
}]);
//定义一个组件
app.directive('ngScroll', [function() {
return {
template: '<ul><li ng-repeat="item in items">{{item}}</li></ul>',
link: function(scope, ele, attr) {
// console.log(ele);
ele.bind('scroll', function(e) {
// console.log("offsetHeight:" + e.target.offsetHeight)
// console.log("scrollTop:" + e.target.scrollTop) //滚动的距离
// console.log("scrollHeight" + e.target.scrollHeight)
if(e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
console.log("你已经到底了")
scope.$apply(attr.ngScroll);
}
})
}
}
}])
</script>
</html>
浙公网安备 33010602011771号