Angularjs 的 ngInfiniteScroll 的使用方法

Angularjs 的 ngInfiniteScroll 的使用方法

---

一、介绍

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

二、使用方法

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

2. 加载模块

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

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

   <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: jamkong@126.com