Angularjs 的 ngInfiniteScroll 的使用方法
来源:互联网 发布:杭州真趣网络 编辑:程序博客网 时间:2024/05/18 02:04
Angularjs 的 ngInfiniteScroll 的使用方法
一、介绍
ngInfiniteScroll 是一个 AngularJS 的扩展指令,实现了网页的无限滚动的功能,也就是相当于页面滚动到最底部的时候自动加载更多内容。
二、使用方法
- 引入js库
<script type='text/javascript' src='path/to/jquery.min.js'></script><script type='text/javascript' src='path/to/angular.min.js'></script><script type='text/javascript' src='path/to/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
0 0
- Angularjs 的 ngInfiniteScroll 的使用方法
- Angularjs 的 ngInfiniteScroll 的使用方法
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS 无限滚动加载数据控件 ngInfiniteScroll
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- AngularJS中的滚动加载,通过ngInfiniteScroll实现下拉滚动加载
- angularjs的监听方法$watch、$watchGrou、$watchCollection的使用方法
- angularjs学习笔记--ng-class的三种使用方法
- 对AngularJs中依赖注入的理解和使用方法
- AngularJS入门 、AngularJS控制器 、AngularJS常见的内置指令
- AngularJS系列:2、AngularJS的“禅道(理念)”
- AngularJs实战(AngularJs的四大核心理念)
- AngularJS学习之一:AngularJS的QUICKSTART
- AngularJS学习:AngularJS的甜蜜点
- 的使用方法
- AngularJS的$resource
- AngularJs 的 好文章
- ImageView 设置图片缩放有两种方法
- char*,const char*,string相互转换
- jsp:forward jsp:include传中文参数乱码问题的解决方法
- XML 和 ini作为配置文件优缺点
- java.lang.management包——实现监视和管理 Java 虚拟机
- Angularjs 的 ngInfiniteScroll 的使用方法
- 练习四 1001
- 排序算法总结(3)——插入排序
- Dogpile效应以及solution
- java中this语句来调用其他构造方法的规则
- C/C++经典面试题
- QT浮点型输出问题
- 在ubuntu 15.10下安装VMware Tools
- python _ underscore variable