Angularjs 的 ngInfiniteScroll 的使用方法
Angularjs 的 ngInfiniteScroll 的使用方法
一、介绍
ngInfiniteScroll 是一个 AngularJS 的扩展指令,实现了网页的无限滚动的功能,也就是相当于页面滚动到最底部的时候自动加载更多内容。
二、使用方法
引入js库
<script type='text/javascript' src='path/jquery.min.js'></script>
<script type='text/javascript' src='path/angular.min.js'></script>
<script type='text/javascript' src='path/ng-infinite-scroll.min.js'></script>加载模块
angular.module('myApplication', ['infinite-scroll']);
定义要实现滚动的元素
<div infinite-scroll="vm.nextPage()" infinite-scroll-disabled="vm.busy" infinite-scroll-distance="3"></div>
然后自己去实现nextPage()方法既可以。
三、指令解释:
infinite-scroll:
是主要加载数据用的,也就是说,当你下拉到底部的时候就会触发这个方法去加载数据。infinite-scroll-disabled:
这个值默认是false(Boolean类型), 默认关闭 “停止滚动” 这个功能.
当值为true的时候,infinite-scroll=”vm.nextPage()”中的vm.nextPage()方法将不会被调用。
翻页到底部的时候需要给一个 infinite-scroll-disabled=’{{scroll_switch}}’ 变量改变 disable的值。infinite-scroll-distance:
这个值意思大致就是间隔多少页,比如说:如果该值为“0”的话,那么,当页面滚动到底部的时候才开始去加载数据。
如果该值为“1”的话,那么,当页面滚动到离底部还剩“1”页的时候,它就会去加载了。当然第一次访问页面的时候(还没开始滚动内容),它会先加载两页内容。
参考:
https://github.com/sroze/ngInfiniteScroll
http://www.oschina.net/p/nginfinitescroll
https://www.douban.com/note/331741944/
如有侵权,请告知。
Email: jamkong@126.com
Angularjs 的 ngInfiniteScroll 的使用方法的更多相关文章
- angularjs 外部调用controller中的方法
angular.element(document.querySelector('[ng-controller=mainCtrl]')).scope().viewGo('tab.VIPPay_Succe ...
- [Angularjs]处理页面闪烁的方法
摘要 在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让 ...
- AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
- angularjs 可以加入html标签方法------ng-bind-html的用法总结(2)
angular-ngSanitize模块-$sanitize服务详解 本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指 ...
- AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...
- AngularJS中控制器之间通信方法
在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...
- AngularJS路由变化 监听方法
#使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess ##使用场景:在路由配置文 ...
- angularjs 可以加入html标签方法------ng-bind-html的用法总结(1)
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: n ...
- angularJS常用的内置方法
angular.lowercase(aaa); angular.uppercase(bbb); angular.isString(); angular.isNumber(); angular.isAr ...
随机推荐
- SQL*Loader之CASE5
CASE5 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase5.sql set termout off rem host write sys$output &quo ...
- Java - IDE
JDK安装及环境变量配置 下载安装对应版本的JDK 控制面板--->系统--->属性--->高级系统设置--->环境变量 新建系统变量JAVA_HOME 变量名:JAVA_HO ...
- T-SQL中的一些小陷阱
1,当心ISNULL函数对你的逻辑引起BUG 有人喜欢或者习惯于(并不代表我推荐,甚至这种写法没有任何好处)用ISNULL处理变量这种方式写查询 比如:select * from TestISNULL ...
- Azure ARM (7) ARM Template - 使用Visual Studio编辑
<Windows Azure Platform 系列文章目录> 之前介绍的ARM Template,都是使用文本编辑器来编辑JSON文件的. 文本讲介绍如何使用Visual Studio, ...
- 性能调优:理解Set Statistics IO输出
性能调优是DBA的重要工作之一.很多人会带着各种性能上的问题来问我们.我们需要通过SQL Server知识来处理这些问题.经常被问到的一个问题是:早上这个存储过程运行时间还是可以的,但到了晚上就很慢很 ...
- SQL Server存储(7/8) :理解BCM页
今天我们来讨论下批量更改映射(Bulk Changed Map:BCM)页,还有大容量日志恢复模式( bulk logged recovery model )如何运作的. 批量更改映射(Bulk Ch ...
- elasticsearch 集群
elasticsearch 集群 搭建elasticsearch的集群 现在假设我们有3台es机器,想要把他们搭建成为一个集群 基本配置 每个节点都要进行这样的配置: cluster.name: ba ...
- QCustomplot使用分享(七) 层(完结)
一.分层绘制 一直说要讲2.0.0版本,但总是想把1.3.2版本拿出来比较一下,这篇文章也不例外.QCustomPlot2.0.0beta版本比1.3.2release版本有一个很大的改进那就是分层绘 ...
- 【Swift学习】Swift编程之旅---方法(十五)
在Swift中结构体和枚举也能够定义方法,而在 Objective-C 中,类是唯一能定义方法的类型. 实例方法 实例方法是属于某个特定类.结构体或者枚举类型实例的方法,实例方法提供访问和修改实例属性 ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...