使用Angular下拉自动加载
使用Angular下拉自动加载
一、介绍
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>
jquery.min.js下载地址：http://www.bootcdn.cn/jquery/
angular.min.js下载地址：http://www.bootcdn.cn/angular.js/
ng-infinite-scroll.min.js下载地址：https://www.bootcdn.cn/ngInfiniteScroll/
2.定义要实现的元素
<body ng-app="scrollApp">
<div ng-controller='scrollController' ng-cloak>
<div infinite-scroll='nextPage()' infinite-scroll-disabled='isData' infinite-scroll-distance='0'>
<div ng-repeat='item in items'>
<p> <span>{{item.title}}</span>
<span>{{item.totalCount}}</span>
<span>{{item.weekCount}}</span>
</p>
</div>
</div>
</div>
</div>
3.加载模块
<script>
var scrollAppModule = angular.module('scrollApp', ['infinite-scroll']);
toastr.options.positionClass = 'toast-top-center';
scrollAppModule.controller('scrollController', function ($scope) {
$scope.isData = false;//定义isData当为false的时候可以使用滚动当为ture的时候禁止滚动
}
<script>
然后自己去实现nextPage()方法既可以。
三、指令解释：
infinite-scroll:
是主要加载数据用的，也就是说，当你下拉到底部的时候就会触发这个方法去加载数据。
infinite-scroll-disabled:
这个值默认是false(Boolean类型), 默认关闭 “停止滚动” 这个功能.
当值为true的时候，infinite-scroll=”vm.nextPage()”中的vm.nextPage()方法将不会被调用。
翻页到底部的时候需要给一个 infinite-scroll-disabled=’{{scroll_switch}}’ 变量改变 disable的值。
infinite-scroll-distance:
这个值意思大致就是间隔多少页，比如说：如果该值为“0”的话，那么，当页面滚动到底部的时候才开始去加载数据。
如果该值为“1”的话，那么，当页面滚动到离底部还剩“1”页的时候，它就会去加载了。当然第一次访问页面的时候（还没开始滚动内容），它会先加载两页内容。
注意：不要把ng-repeat和infinite-scroll放在同一个标签内
相关链接：https://blog.csdn.net/qq_36012563/article/details/88058949
https://blog.csdn.net/u011220611/article/details/73177665
