Question

我从Web服务获取数据，并且每次尝试更新都应该获取数据，因此从后面加载的最后一个ID。这对我来说很好，问题在于离子滚动。我看到如果你没有伴随ng-if无限信息加载时间非常不舒服。如果有数据确定充电，如果充电，否则不收取任何费用，那就是我为我的变量ng-if设定值的地方。但是，一旦真正的seteo不再加载我的卷轴。

HTML

<ion-infinite-scroll on-infinite="loadMore()" ng-if="!noMoreItemsAvailable" distance="1%"></ion-infinite-scroll>

JS

$scope.refreshView = function () {
    if (!navigator.onLine) {
        $scope.hide();
        $ionicPopup.show({
            title: 'Notificación',
            subTitle: '',
            content: 'No tienes conexión a internet.',
            buttons: [{
                text: 'Aceptar',
                type: 'button-positive',
            }, ]
        })
    } else {
        console.log($scope.ultima_id);
        if (typeof $scope.ultima_id == "undefined" || $scope.ultima_id == "") {

        } else {
            console.log(UrlService.url + 'refreshView/' + sessionService.get("user_id") + '/' + sessionService.get("hash") + "/" + $scope.ultima_id);
            $http({
                    method: 'GET',
                    url: UrlService.url + 'refreshView/' + sessionService.get("user_id") + '/' + sessionService.get("hash") + "/" + $scope.ultima_id
                })
                .success(function (data) {
                    console.log("Refresh " + data);
                    if (data.Count > 0) {
                        $scope.viewsDespeglables = true;
                        angular.forEach(data.View, function (value, key) {
                            if (data.Count - 1 == key) {
                                $scope.ultima_id = value.id;
                            }
                            $scope.views.push(value);
                        });
                    } else {
                        console.log(data);
                        $scope.noMoreItemsAvailable = true;
                    }
                })
                .error(function () {})
                .finally(function () {
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
        }
    }
}

$scope.loadMore = function () {
    $scope.refreshView();
    $scope.$broadcast('scroll.infiniteScrollComplete');
    $scope.$broadcast('scroll.resize');
};

Answer 1

为什么不使用集合重复？什么是重复集合？：来自离子文档：“集合重复允许应用程序显示大量项目列表，而不是ng-repeat。”

它只向DOM呈现当前可见的项目。

这意味着在可以容纳八个项目的手机屏幕上，只会呈现与当前滚动位置匹配的八个项目。

基础知识：

给予collection-repeat的数据必须是一个数组。如果未提供item-height和item-width属性，则将假定列表中的每个项目与第一个项目具有相同的维度。不要使用带有集合重复的角度一次性绑定（：:)。为每个项目的范围分配新数据并在滚动时重新消化。绑定需要更新，而一次性绑定则不需要。 “

代码：

<body ng-controller="MainCtrl as main">
  <ion-header-bar class="bar-positive">
    <h1 class="title">1000 Items</h1>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item collection-repeat="item in main.items">
        {{item}}
      </ion-item>
    </ion-list>
  </ion-content>
</body>

var myApp = angular.module('myApp', ['ionic']);

myApp.controller('MainCtrl', function() {
  this.items = [];
  for (var i = 0; i < 1000; i++) this.items.push(i);
});

离子无限滚动失败与离子

1 个答案: