angularJS-滚动到底部触发事件

来源：互联网发布：喇叭测试软件编辑：程序博客网时间：2024/06/05 18:34
<!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>
阅读全文
0 0