離子無限卷軸

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('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('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 ：

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

然后你可以有一些變量來控制分頁：

var page = 0;
var pageSize = 10;

我在加載視圖時開始加載：

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

$scope.loadMore然后會增加頁碼：

page++;

並調用服務層：

dataService.GetPosts(page, pageSize)

當我到達流的末尾時，我會設置變量：

$scope.theEnd = true;

讓指令知道我們沒有其他要追加的項目。

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

finally ，當承諾解決總是被調用。

而不是ng-repeat你可以使用collection-repeat ，它應該更快。

你可以在這里玩。

Answer 2

試試這個創建一個函數infiniteScrollCompleteCancelLoadMore並在你想完成滾動時調用它，你已到達列表的末尾。

function infiniteScrollCompleteCancelLoadMore() {
        $timeout(function () {
            $timeout(function () {
                $scope.$broadcast('scroll.infiniteScrollComplete');
                $rootScope.canLoad = false;
            });
        });
    }


$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);
  infiniteScrollCompleteCancelLoadMore() // CHANGE HERE  
  });
};

和你的HTML

<ion-infinite-scroll on-infinite="loadMore()" ng-if="canLoad" distance="1%"
                         immediate-check="false"></ion-infinite-scroll>

或致電：這是你只是想取消loadMore loop 。

function infiniteScrollComplete() {
        $timeout(function () {
            $timeout(function () {
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });
        });
    }