菜鸟笔记-AngularJS整合下拉刷新infinite-scroll框架
1 ⾸先去下载infinite-scroll
直接加⼊
<script src="infinite-scroll2.js"></script>
第⼀个报错 ：
Uncaught SyntaxError: Unexpected reserved word
暂时理解为引⼊外部模块，暂时不了解报错原因，直接删除
第⼆个报错：
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
let 必须在严格模式才能运⾏，在最前⾯加上 "use strict"；解决
第三个报错：
Uncaught SyntaxError: Unexpected reserved word
模块是独⽴的⽂件，该⽂件内部的所有的变量外部都⽆法获取。如果希望获取某个变量，必须通过export输出，
理解为输出这个模块变量，直接删除
第四个报错：
Uncaught Error: [$injector:modulerr] Failed to instantiate module jkdapp due to:
Error: [$injector:modulerr] Failed to instantiate module  due to:
Error: [$injector:nomod] Module '' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
看翻译是实例模块化失败，确保指定依赖项
var app = dule("jkdapp", ['infinite-scroll']);
指定依赖项。
第五个错误
页⾯上⽆限加载加载
原因：给列表指定了⾼度，并且设置了显⽰滚动条
⽐如：height:300px;overflow: auto;
使数据⽆法铺满屏幕，就会使数据⽆限加载
删除列表⾼度
第六错误：
⾸次加载没有铺满屏幕
原因：1 不是http请求的数据
2实数据的第⼆次请求之后数据形成的列表⾼度没有超过屏幕⾼度
⽐如：data=[1,2] 最后列表⾼度<；屏幕⾼度
并不会⾃动铺满屏幕
最后代码
html:
<div class="detail_list">
<ul class="s-container-s" infinite-scroll='loadMore()' infinite-scroll-distance='0' infinite-scroll-disabled="busy">                <li ng-repeat="obj in items">
<div>
<span> {{obj.name}}</span>
</div>
</li>
</ul>
</div>
js:
var app = dule("app", ['infinite-scroll']);
// $locationProvider.html5Mode(true);
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
// 当前页数
$scope.currentPage = 0;
// 总页数
$alPages = 100000;
// 防⽌重复加载
$scope.busy = false;
// 存放数据
$scope.items = [];
// 请求数据⽅法
$scope.loadMore = function () {
if ($scope.currentPage < $alPages) {
$scope.currentPage++;
if ($scope.busy) {
return false;
}
$scope.busy = true;
$http({
method: 'GET',
url: 'url',
params: {
par:par
pageIndex: $scope.currentPage,
pageSize: 12
}
}).then(function successCallback(response) {
}).then(function successCallback(response) {
var data = response.data;
$scope.busy = false;
//组织数据
for (var i in data.list) {
$scope.items.push(data.list[i]);
}
$alPages = alPages;
});
};
}
$scope.loadMore();
});
效果如下：
angular和angularjs可以⾃动铺满整个屏幕
demo上传⾄git:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。