javascript - ionic 无限滚动

Question

我正在使用 wordpress 作为应用程序的后端，我想使用无限滚动，但我在连接文章时遇到了问题。

我正在使用工厂调用服务:

.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;
        }
    }
    })

我的 Controller 看起来像这样:

.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 使应用程序无用。

Answer 1

ion-infinite-scroll 使用某种分页结果，您似乎将所有结果都填入列表。

您的 API 应如下所示:

http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2&filter[page]=1

注意我添加了一个页面过滤器。

负责获取数据的服务应如下所示:

.factory('dataService', function($http) {
   return {
      GetPosts: function(page, pageSize) {
        return $http.get("http://mywebservice/api/test/posts/" + page + "/" + pageSize);
      }
   };
});

你的 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");
        });
    };

})

将初始化一个 objetct 数组 - 正如您正在做的那样 - 以及一个 bool 值，它在您到达终点时告诉指令 ion-infinite-scroll:

$scope.posts = [];
$scope.theEnd = false;

然后你可以有一些变量来控制分页:

var page = 0;
var pageSize = 10;

我在加载 View 时开始加载:

$scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
});

$scope.loadMore 然后会增加页码:

page++;

并调用服务层:

dataService.GetPosts(page, pageSize)

当我到达流的末尾时，我将设置变量:

$scope.theEnd = true;

让指令知道我们没有其他项目要追加。

.finally(function() {
    $scope.$broadcast("scroll.infiniteScrollComplete");
});

finally 在 promise 被 resolved 时总是被调用。

您可以使用 collection-repeat 而不是 ng-repeat这应该快得多。

你可以玩它here .