离子无限卷轴 [英] Ionic infinite scroll

问题描述

我使用 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-repeat<代替ng-repeat/a> 应该快得多.

Instead of ng-repeat you can use collection-repeat which should be much faster.

你可以在这里玩它.

这篇关于离子无限卷轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！