Angularjs 的 ngInfiniteScroll 的使用方法

Angularjs 的 ngInfiniteScroll 的使用方法

---

一、介绍

ngInfiniteScroll 是一个 AngularJS 的扩展指令，实现了网页的无限滚动的功能，也就是相当于页面滚动到最底部的时候自动加载更多内容。

二、使用方法

1. 引入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>

1. 加载模块

angular.module('myApplication', ['infinite-scroll']);

1. 定义要实现滚动的元素

<div infinite-scroll="vm.nextPage()" infinite-scroll-disabled="vm.busy" infinite-scroll-distance="3"></div>

然后自己去实现nextPage()方法既可以。

三、指令解释：

1. infinite-scroll:
   是主要加载数据用的，也就是说，当你下拉到底部的时候就会触发这个方法去加载数据。

2. infinite-scroll-disabled:
   这个值默认是false(Boolean类型), 默认关闭 “停止滚动” 这个功能.
   当值为true的时候，infinite-scroll=”vm.nextPage()”中的vm.nextPage()方法将不会被调用。
   翻页到底部的时候需要给一个 infinite-scroll-disabled=’{{scroll_switch}}’ 变量改变 disable的值。

3. infinite-scroll-distance:
   这个值意思大致就是间隔多少页，比如说：如果该值为“0”的话，那么，当页面滚动到底部的时候才开始去加载数据。
   如果该值为“1”的话，那么，当页面滚动到离底部还剩“1”页的时候，它就会去加载了。当然第一次访问页面的时候（还没开始滚动内容），它会先加载两页内容。

---

参考：
https://github.com/sroze/ngInfiniteScroll
http://www.oschina.net/p/nginfinitescroll
https://www.douban.com/note/331741944/

如有侵权，请告知。
Email: [e-mail]