今天来跟你们分享一个小的demo，通常网页浏览到底部的时候会有一个点击加载更多的按钮，以前一直纠结怎么写这个，今天学习angular时发现能够用组件来实现这么一个小的效果，你们有兴趣的话能够看一下。html
点击加载更多，代码以下：数组
<!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>