AngularJS 无限滚动加载数据控件 ngInfiniteScroll
程序员文章站
2022-06-12 09:55:37
...
在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js和jquery实现都不复杂都是既然AngularJS提供现成的我们怎么不用昵。
ng-infinite-scroll.js这个组件则可以实现:
ng-infinite-scroll.js:下载地址:http://sroze.github.io/ngInfiniteScroll/
使用:
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基于ngInfiniteScroll实现下拉滚动加载的方法
-
PHP+InfiniteScroll实现网页无限滚动加载数据实例
-
Angularjs 滚动加载更多数据
-
基于AngularJS实现页面滚动到底自动加载数据的功能
-
Vue下滚动到页面底部无限加载数据的示例代码
-
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
-
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
-
PHP+InfiniteScroll实现网页无限滚动加载数据实例
-
Angularjs 滚动加载更多数据
-
asp.net+jquery滚动滚动条加载数据的下拉控件_jquery