在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载，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. 26- java的String 转json

    https://www.cnblogs.com/nihaorz/p/5885307.html Gjson 下载:https://download.csdn.net/download/qq_394515 ...

  2. xss测试用例

    alert(1)// 'alert(1)// '>alert(1)// >alert(1)// "alert(1)// ">alert(1)// alert(1) ...

  3. WebApi2跨域问题及解决办法

    跨域问题产生的原因 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议, ...

  4. gRPC的.netClient客户端第一次连接出现StatusCode=Unavailable的解决办法？

    1.问题还原: The service does not automatically connect, free after a period of time, the first call will ...

  5. python 面向对象编程 之 单例模式

    单例模式三种实现方式: 单例模式:单例模式是解决系统资源浪费的一种方案,是指一个类实例化后可以多次使用此对象. 单例模式应用场景:数据库操作.日志.后台打印 # settings.py# Host=' ...

  6. [转] initrd详解

    转自:http://www.cnblogs.com/leaven/archive/2010/01/07/1641324.html 在Linux操作系统中,有一项特殊的功能——初始化内存盘INITRD( ...

  7. Python-多进程VS多线程

    多进程VS多线程 功能: 进程:能够完成多任务,比如,同时运行多个QQ 线程:能够完成多任务,比如一个QQ中的多个聊天窗口 定义 进程:系统进行资源分配和测试的一个独立单位,线程自己基本上不拥有系统资 ...

  8. GET与POST传递数据的长度分析

    在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST.GET - 从指定的资源请求数据,POST - 向指定的资源提交要被处理的数据.本篇文章我们就来分析一下GET与PO ...

  9. linux shell 重定向中的 & 符号

    写一个简单的 demo 示例 #include <stdio.h> int main() { fprintf(stdout, "stdout output\n"); f ...

  10. Python之路(第五篇) Python基本数据类型集合、格式化、函数

    一.变量总结 1.1 变量定义 记录某种状态或者数值,并用某个名称代表这个数值或状态. 1.2 变量在内存中的表现形式 Python 中一切皆为对象,数字是对象,列表是对象,函数也是对象,任何东西都是 ...