在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载，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 无限滚动加载数据控件 ngInfiniteScroll的更多相关文章

  1. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  2. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  3. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

  4. infinite-scroll插件无限滚动加载数据的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  5. 【无限滚动加载数据】—infinite-scroll插件的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  6. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  7. Angular: 使用 RxJS Observables 来实现简易版的无限滚动加载指令

    我使用 angular-cli 来搭建项目. ng new infinite-scroller-poc --style=scss 项目生成好后,进入 infinite-scroller-poc 目录下 ...

  8. 使用 Angular 和 RxJS 实现的无限滚动加载

    无限滚动加载应该是怎样的? 无限滚动加载列表在用户将页面滚动到指定位置后会异步加载数据.这是避免寻主动加载(每次都需要用户去点击)的好方法,而且它能真正保持应用的性能.同时它还是降低带宽和增强用户体验 ...

  9. EasyUI加载树控件自动展开所有目录

    在这里如何加载树控件就不在熬述,在加载树控件后,树的节点全部展开,要在OnLoadSuccess事件中写代码:

随机推荐

  1. Freemarker全部文档和具体实例

    自己查找到了一些相关的资料分享给大家,有兴趣的可以去看看! Freemarker全部文档:http://www.open-open.com/doc/list/101?o=p

  2. mysql lost connection to server during query

    vim /etc/mysql/mysql.conf.d/mysqld.cnf [mysqld]#3600000/1000=3600秒=1小时 wait_timeout =3600000#2G缓冲max ...

  3. Java运算符号，对象赋值，别名

    生活发生的一切,才会促使着我继续前行,今天继续更新哦,看书中的代码练习. 例子1  引入net.mindview.util.Print.* ,方便打印结果. package com.date0529; ...

  4. 5C - A == B ?

    Give you two numbers A and B, if A is equal to B, you should print "YES", or print "N ...

  5. nginx + fastdfs 的开机自启动

    虚拟机每次启动之后都要重新启动一下fastdfs 和 nginx服务,比较麻烦,所以增加开机自启动: 编辑 /etc/rc.d/rc.local 文件,增加启动项: 1.编辑文件 vim /etc/r ...

  6. java读取properties文件时候要注意的地方

    java读取properties文件时,一定要注意properties里面后面出现的空格! 比如:filepath = /home/cps/ 我找了半天,系统一直提示,没有这个路径,可是确实是存在的, ...

  7. ubuntu 下通过ftp命令下载文件

    /*连接*/ $ ftp 192.168.180.2Connected to 192.168.180.2.Name (192.168.180.2:rivsidn): admin  Password: ...

  8. SVN 钩子 同步测试服务器

    http://blog.csdn.net/showso2006/article/details/6750441 多人开始使用subversion之后,就想着,要建立一个测试用的服务器,不需要把文件up ...

  9. js 文件下载 进度条

    js: /** * 下载文件 - 带进度监控 * @param url: 文件请求路径 * @param params: 请求参数 * @param name: 保存的文件名 * @param pro ...

  10. SQL 将一个表中的所有记录插入到一个临时表中

    insert into #tempTable select * from TempTable WHERE + 查询条件