在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载，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. Quartz代码及配置详解（转）

    Quartz可以用来做什么? Quartz是一个任务调度框架.比如你遇到这样的问题 想每月25号,信用卡自动还款 想每年4月1日自己给当年暗恋女神发一封匿名贺卡 想每隔1小时,备份一下自己的爱情动作片 ...

  2. Bootstrap(4) 表单和图片

    1.表单 基本格式,实现基本的表单样式 <form class="form-horizontal"> <div class="form-group&qu ...

  3. 5A - 超级楼梯

    有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? Input 输入数据首先包含一个整数N,表示测试实例的个数,然后是N行数据,每行包含一个整数M(1< ...

  4. JavaScript中双叹号(!!)和单叹号(!)

    转自:JavaScript中双叹号(!!)作用 经常看到这样的例子: var a: var b=!!a; a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不 ...

  5. stl中顺序性容器，关联容器两者粗略解释

    什么是容器 首先,我们必须理解一下什么是容器,在C++ 中容器被定义为:在数据存储上,有一种对象类型,它可以持有其它对象或指向其它对像的指针,这种对象类型就叫做容器.很简单,容器就是保存其它对象的对象 ...

  6. Eclipse中的maven项目搭建

    一.eclipse中的maven设置 1.打开“首选项”----> "maven"---->"Installations".用来查看maven的使用 ...

  7. Codeforces55D Beautiful numbers

    原题链接 虽然依旧是套模板,但是因为我太弱了,不会建状态,所以去看了题解.. 这里就直接引用我看的题解吧,写的不错的. 题解 //我的代码 #include<cstdio> #includ ...

  8. How to change and add some params to request in Laravel controller?

    $request->merge([ 'aae_id' => request('id', 0), 'foo' => 'bar', ]);

  9. Spring ConversionService 类型转换（二） ConversionService

    Spring ConversionService 类型转换(二) ConversionService Spring 系列目录(https://www.cnblogs.com/binarylei/p/1 ...

  10. connect: Address is invalid on local machine or port is not valid on remote

    idea 运行正常打成jar包运行提示“connect: Address is invalid on local machine or port is not valid on remote” , 解 ...