在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载，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. 关于MYSQL字符集问题（一）

    MySQL的字符集支持(Character Set Support)有两个方面: 字符集(Character set)和排序方式(Collation). 对于字符集的支持细化到四个层次: 服务器(se ...

  2. ES6 Decorator 修饰器

    目的:  修改类的一种方法,修饰器是一个函数 编译: 安装 babel-plugin-transform-decortators-legacy .babelrd      plugins: [&quo ...

  3. springboot 日志2

      SpringBoot关于日志的官方文档 1.简述 SpringBoot官方文档关于日志的整体说明 本博客基于SpringBoot_1.3.6大家请先简单看下这篇英文的官方文档,文中有说 Sprin ...

  4. mongodb导入csv结构化数据

    csv数据样本 "103238704","","-jmyuncker@aol.com-","-r4Vp5iL2VbM=-" ...

  5. XiaoKL学Python（D）argparse

    该文以Python 2为基础. 1. argparse简介 argparse使得编写用户友好的命令行接口更简单. argparse知道如何解析sys.argv. argparse 模块自动生成 “帮助 ...

  6. 神啊！PS是你这样用的吗？

    对于古典油画名作,人们总是持欣赏的态度去观看.能流传至今的作品,也都是当时的名作. 不过,乌克兰艺术家 Alexey Kondakov 却不是这样的,在他手中,那些世界名画也不过是他恶搞的素材罢了. ...

  7. MySQL 检索数据及提高检索速度的方法

    检索数据 mysql> SELECT [DISTINCT] 表名.列名,表名.列名,表名.列名 -- 使用通配符*表示所有列 DISTINCT表示返回不同的值 -> FROM 数据库名.表 ...

  8. Hive 系列（一）安装部署

    Hive 系列(一)安装部署 Hive 官网:http://hive.apache.org.参考手册 一.环境准备 JDK 1.8 :从 Oracle 官网下载,设置环境变量(JAVA_HOME.PA ...

  9. swift 官方获取JSON 数据方法

    var url = NSURL(string: "http://www.weather.com.cn/data/sk/101120501.html") var data = NSD ...

  10. where

    (二)WHERE //where不单独使用,与match,optional match,start,with搭配 where 与match,optional match 一起用,表示约束 where ...