欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AngularJS 无限滚动加载数据控件 ngInfiniteScroll

程序员文章站 2022-06-12 09:55:37
...
在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js和jquery实现都不复杂都是既然AngularJS提供现成的我们怎么不用昵。
ng-infinite-scroll.js这个组件则可以实现:
ng-infinite-scroll.js:下载地址:http://sroze.github.io/ngInfiniteScroll/
使用:
<!DOCTYPE html>
<html ng-app="lxApp" ng-controller="lxCtrl">
  <head>
    <title>柳絮飞祭奠</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
  	<div style="height: 700px;"></div>
  	<div infinite-scroll="mouse_scroller()">
  		<div ng-repeat="item in show"></div>
  	</div>
  </body>
  <script type="text/javascript" src="../plugins/angular/angular.js"></script>
  <script type="text/javascript" src="../plugins/angular/ng-infinite-scroll.js"></script>
  <script type="text/javascript">
  	var lxApp=angular.module("lxApp",['infinite-scroll']);
  	lxApp.controller("lxCtrl",function($scope){
  		$scope.mouse_scroller=function(){
                   //每次滚动到浏览器底部都会触发这个方法这里写你的加载数据业务。
  		};
  	});
  </script>
</html>
相关标签: AngularJS