帶有http的離子無限滾動
[英]Ionic Infinite Scroll with http
問題描述
我的代碼專家有什么問題？ 我使用API獲取數據，然后在無限滾動時，API數據立即出現在滾動之前
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title"><span class="badge badge-assertive">{{items.length}}</span> Items loaded</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Item {{ item }}
</ion-item>
</ion-list>
<ion-infinite-scroll
on-infinite="loadMore()"
distance="10%">
</ion-infinite-scroll>
</ion-content>
JS
.controller('MyCtrl', function($scope,$http) {
$http.get("#",{withCredentials: true})
.success(function(response){
$scope.items=response.products;
}).error(function(response)
{
$scope.status = response || "Request failed";
});
$scope.items = [];
$scope.loadMore = function() {
var data = [];
var l = $scope.items.length
for ( var i = l; i < l+5; i++) {
data.push(i);
}
$scope.$apply(function () {
$scope.items = $scope.items.concat(data);
});
$scope.$broadcast('scroll.infiniteScrollComplete');
};
});
2 個解決方案
解決方案1
0 2015-11-18 06:14:04
<ion-infinite-scroll ng-if="isMoreItems" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
參見上面的語法，區別是ng-if="isMoreItems" 。
現在在您的控制器中。
聲明它$scope.isMoreItems = false; 前幾名。 然后放一張支票
var l = $scope.items.length
if(l == 0){
$scope.isMoreItems = false;
}else{
for ( var i = l; i < l+5; i++) {
data.push(i);
}
$scope.$apply(function () {
$scope.items = $scope.items.concat(data);
});
$scope.isMoreItems = true;
$scope.$broadcast('scroll.infiniteScrollComplete');
}
需要記住的幾點：
- 從您的http請求中獲取分頁數據
- 根據需要管理代碼中的isMoreItems變量
- 調用
$scope.$broadcast('scroll.infiniteScrollComplete');每當滾動加載完成時。
如果您遵循以上幾點，您的問題就可以解決。
解決方案2
0 2017-10-26 01:03:46
看這個 ...
var offset = 1;
var max = 10;
var customer = 2;
vm.customerList = [];
var url= '/some/some/?customer='+'customer'+'&offset='+offset+'&max='+max;
$http.get(url).success(function (response) {
var customerResponse = response.data;
angular.forEach(customerResponse,function(response){
vm.customerList.push(response);
$scope.$broadcast('scroll.infiniteScrollComplete'); });
}).error(function (err) {
$scope.$broadcast('scroll.infiniteScrollComplete');
})
使用http獲取數據的Ionic Framework無限滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.