问题描述
我使用 wordpress 作为应用程序的后端,我想使用无限滚动,但我在连接文章时遇到问题.
I am using wordpress as a backend for an app and I want to use infinite scroll but I am having trouble concatenating articles.
我正在使用工厂调用服务:
I am calling the service using a factory:
.factory('Worlds', function ($http) {
var worlds = [];
storageKey = "worlds";
function _getCache() {
var cache = localStorage.getItem(storageKey );
if (cache)
worlds = angular.fromJson(cache);
}
return {
all: function () {
return $http.get("http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=10").then(function (response) {
worlds = response.data;
console.log(response.data);
return worlds;
});
},
GetNewPosts: function () {
return $http.get("http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2").then(function (response) {
worlds = response.data;
console.log(response.data);
return worlds;
});
},
get: function (worldId) {
if (!worlds.length)
_getCache();
for (var i = 0; i < worlds.length; i++) {
if (parseInt(worlds[i].ID) === parseInt(worldId)) {
return worlds[i];
}
}
return null;
}
}
})
我的控制器看起来像这样:
and my controller looks like this:
.controller('WorldCtrl', function ($scope, $stateParams, $timeout, _, Worlds) {
$scope.worlds = [];
Worlds.all().then(function (data){
$scope.worlds = data;
window.localStorage.setItem("worlds", JSON.stringify(data));
},
function (err) {
if(window.localStorage.getItem("worlds") !== undefined) {
$scope.worlds = JSON.parse(window.localStorage.getItem("worlds"));
}
}
);
$scope.loadMore = function() {
Worlds.GetNewPosts().then(function (worlds){
var loadedIdss = _.pluck($scope.worlds, 'id');
var newItemss = _.reject(worlds, function (item){
return _.contains(loadedIdss, item.id);
});
$scope.worlds = newItemss.concat($scope.worlds);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
})
我正在尝试使用下划线来忽略已经加载的帖子,但是当我尝试无限滚动时,它只会进入一个循环调用更多帖子,但不会将它们添加到我的 ng-repeat 和 ionicLoading 使应用程序无用.
I am trying to use underscore to ignore the posts that are already loaded, however when i try the infinite scroll it just goes into a loop calling more posts but doesnt add them to my ng-repeat and ionicLoading renders the app useless.
推荐答案
ion-infinite-scroll
处理某种分页结果,并且您似乎将所有结果提供给您的列表.
ion-infinite-scroll
works with some sort of paginated result and you seem to feed your list with all the results.
您的 API 应如下所示:
Your API should look something like this:
http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2&filter[page]=1
注意我添加了一个页面过滤器.
notice I've added a page filter.
您负责获取数据的服务应如下所示:
and your service responsible to fetch the data should look something like this:
.factory('dataService', function($http) {
return {
GetPosts: function(page, pageSize) {
return $http.get("http://mywebservice/api/test/posts/" + page + "/" + pageSize);
}
};
});
你的控制器
.controller('mainController', function($scope, dataService) {
$scope.posts = [];
$scope.theEnd = false;
var page = 0;
var pageSize = 10;
$scope.$on('$stateChangeSuccess', function() {
$scope.loadMore();
});
$scope.loadMore = function(argument) {
page++;
dataService.GetPosts(page, pageSize)
.then(function(result) {
console.log('items fetched: ' + result.data.length);
if (result.data.length > 0) {
angular.forEach(result.data, function(value, key) {
$scope.posts.push(value);
});
}
else {
$scope.theEnd = true;
}
})
.finally(function() {
$scope.$broadcast("scroll.infiniteScrollComplete");
});
};
})
将初始化一个 objetct 数组 - 正如你正在做的 - 以及一个布尔值,当你到达终点时,它会告诉指令 ion-infinite-scroll
:
would initialize an array of objetct - as you're doing - and a boolean which tells the directive ion-infinite-scroll
when you've reached the end:
$scope.posts = [];
$scope.theEnd = false;
然后你可以有一些变量来控制分页:
Then you can have some variables to control the pagination:
var page = 0;
var pageSize = 10;
我在加载视图时开始加载:
I start loading when the view is loaded:
$scope.$on('$stateChangeSuccess', function() {
$scope.loadMore();
});
$scope.loadMore
然后会增加页码:
page++;
并调用服务层:
dataService.GetPosts(page, pageSize)
当我到达流的末尾时,我会设置变量:
when I've reached the end of the stream I would set the variable:
$scope.theEnd = true;
让指令知道我们没有其他项目要附加.
to let the directive know we don't have other items to append.
.finally(function() {
$scope.$broadcast("scroll.infiniteScrollComplete");
});
finally
总是在 promise 被解决时被调用.
finally
is always called when the promise is resolved.
您可以使用collection-repeatng-repeat/a> 应该快得多.
Instead of ng-repeat
you can use collection-repeat which should be much faster.
这篇关于离子无限卷轴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!