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: [email protected]