Angularjs 的 ngInfiniteScroll 的使用方法

Angularjs 的 ngInfiniteScroll 的使用方法

---

一、介绍

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

二、使用方法

1. 引入js库

   1 <script type='text/javascript' src='path/jquery.min.js'></script>
   2 <script type='text/javascript' src='path/angular.min.js'></script>
   3 <script type='text/javascript' src='path/ng-infinite-scroll.min.js'></script>

    

2. 加载模块

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

    

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

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

    

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

三、指令解释：

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