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: [e-mail]