在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载，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. how2j网站前端项目——天猫前端（第一次）学习笔记4

    开始产品页面的学习.项目里面有900多种商品,但是每种商品的布局是一致的:1.产品图片 2.基本信息 3.产品详情 4.累计评价 5.交互.从第一个产品图片开始吧! 一.产品图片 产品图片用到了分类页 ...

  2. ADT和DS

    Abstract Data Type vs. Data Structrue 抽象数据类型=数据模型+定义在该模型上的一组操作.  interface 数据结构=基于某种特定语言,实现ADT的一整套算法 ...

  3. POPUP_TO_CONFIRM的使用方法

    CALL FUNCTION 'POPUP_TO_CONFIRM'       EXPORTING         TEXT_QUESTION               = '是否要打印凭证!'    ...

  4. 同一台主机部署两个比特币钱包以及rpc服务的摘要

    .bitcoin QA Test环境 启动指定参数: "C:\Program Files (x86)\Bitcoin\bitcoin-qt.exe" -testnet -serve ...

  5. ContenteProvider

    以前只写过程序中添加背景音乐,在程序一开始就运行音乐,当程序结束后音乐也随即停止.遇到这样的功能,我们一般是通过系统提供的ContentProvider来实现的,系统对于常用的数据也给开发者提供了方便 ...

  6. input，textarea在ios和Android上阴影和边框的处理方法（在移动端）

    1.去掉ios上阴影的方法只需要在css文件上添加input,textarea{-webkit-appearance: none;}就可以了 2.在移动端上input和textarea边框问题,也是在 ...

  7. if 循环的深入理解 哈希表的一种应用

       哈希表的值作为一个颜色容器,值默认为标识1, 表示未曾用过,若用过标识为0:  1: 程序第一步    遍历哈希表,查找标识为1 未曾用过的颜色 我用了这个: string colorno_us ...

  8. accept与epoll惊群 转载

    今天打开 OneNote,发现里面躺着一篇很久以前写的笔记,现在将它贴出来. 1. 什么叫惊群现象 首先,我们看看维基百科对惊群的定义: The thundering herd problem occ ...

  9. HDU 2665.Kth number 区间第K小

    Kth number Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  10. POJ1659 Frogs' Neighborhood(青蛙的邻居) Havel-Hakimi定理

    Frogs' Neighborhood Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 8729   Accepted: 36 ...