离子无限滚动 [英] Ionic infinite scroll
问题描述
我用的词preSS作为一个应用程序后台，我想用无限滚动，但我有麻烦串联的文章。
我使用的是工厂调用服务：
.factory（'世界'，函数（$ HTTP）{
变种世界= []; storageKey =世界; 功能_getCache（）{
VAR缓存= localStorage.getItem（storageKey）;
如果（缓存）
世界= angular.fromJson（缓存）;
}
返回{
所有：功能（）{
返回$http.get(\"http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=10\").then(function （响应）{
世界= response.data;
的console.log（response.data）;
返回的世界;
}）;
}， GetNewPosts：功能（）{
返回$http.get(\"http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2\").then(function （响应）{
世界= response.data;
的console.log（response.data）;
返回的世界;
}）;
}，
得到：函数（worldId）{
如果（！worlds.length）
_getCache（）;
对于（VAR I = 0; I＆LT; worlds.length;我++）{
如果（parseInt函数（世界[I] .ID）=== parseInt函数（worldId））{
返回世界[I]
}
}
返回null;
}
}
}）
和我的控制器看起来像这样：
.controller（'WorldCtrl'，函数（$范围，$ stateParams，$超时，_，世界）{
$ scope.worlds = [];
Worlds.all（）。然后（功能（数据）{
$ scope.worlds =数据;
window.localStorage.setItem（世界，JSON.stringify（数据））;
}， 功能（错误）{
如果（window.localStorage.getItem（世界）！==未定义）{
$ scope.worlds = JSON.parse（window.localStorage.getItem（世界））;
}
}
）; $ scope.loadMore =功能（）{ Worlds.GetNewPosts（）。然后（功能（世界）{
VAR loadedIdss = _.pluck（$ scope.worlds，ID）;
VAR newItemss = _.reject（世界，函数（项目）{
返回_.contains（loadedIdss，item.id）;
}）;
$ scope.worlds = newItemss.concat（$ scope.worlds）;
。$ $范围广播（'scroll.infiniteScrollComplete'）;
}）;
};}）
我试图用下划线忽略已加载的职位，但是当我尝试无限滚动它只是进入一个循环，呼吁更多的职位，但犯规它们添加到我的NG-重复和ionicLoading呈现应用程序形同虚设。
离子无限滚动适用于某种分页的结果，你好像跟养活你的列表所有结果。
您API应该是这个样子：
<$p$p><$c$c>http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2&filter[page]=1通知我添加了一个网页过滤器。
和你的服务负责获取数据应该是这个样子：
.factory（'的DataService'，函数（$ HTTP）{
返回{
GetPosts：功能（页的pageSize）{
返回$ http.get（HTTP：//为MyWebService / API /测试/职位/+网页+/+ pageSize的）;
}
};
}）;
您控制器
.controller（'mainController'，函数（$范围的DataService）{ $ scope.posts = [];
$ scope.theEnd = FALSE; VAR页= 0;
变种的pageSize = 10; $范围。在$（'$ stateChangeSuccess'，函数（）{
$ scope.loadMore（）;
}）; $ scope.loadMore =功能（参数）{
++页面;
dataService.GetPosts（页的pageSize）
。然后（功能（结果）{
的console.log（'项目获取：'+ result.data.length）;
如果（result.data.length大于0）{
angular.forEach（result.data，功能（值，键）{
$ scope.posts.push（值）;
}）;
}
其他{
$ scope.theEnd =真;
}
}）
。最后（函数（）{
。$ $范围广播（scroll.infiniteScrollComplete）;
}）;
};}）
将初始化objetct数组 - 你正在做的 - 和一个布尔值，它告诉指令离子无限滚动当你已经达到了目的：
$ scope.posts = [];
$ scope.theEnd = FALSE;
然后你就可以有一些变量来控制分页：
VAR页= 0;
变种的pageSize = 10;
该视图被加载时，我开始加载：
$范围。在$（'$ stateChangeSuccess'，函数（）{
$ scope.loadMore（）;
}）;
$ scope.loadMore 然后将递增页码：
页++;
和调用服务层：
dataService.GetPosts（页，pageSize的）
当我到达流的末尾，我将设置变量：
$ scope.theEnd = TRUE;
让指令知道我们没有其他物品追加。
。最后（函数（）{
。$ $范围广播（scroll.infiniteScrollComplete）;
}）;
最后时承诺解决总是被调用。
而不是 NG-重复您可以使用的这应该是更快的收集重复。
您可以用它玩这里。
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');
});
};
})
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 works with some sort of paginated result and you seem to feed your list with all the results.
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);
}
};
});
Your controller
.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");
});
};
})
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 then would increment the page number:
page++;
and call the service layer:
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 is always called when the promise is resolved.
Instead of ng-repeat you can use collection-repeat which should be much faster.
You can play with it here.
这篇关于离子无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
