İyonik Spinner görünmüyor

İyonik toplama tekrarı listesini bir http isteği ile dolduruyorum, ancak her şeyi doğrudan DOM'a yüklemek istemiyorum. Bu yüzden, yalnızca birkaç öğeyi görüntüledim ve siz aşağı kaydırdığınızda geri kalanını ekliyorum. Bunun için sonsuz kaydırma işlevini uyguladım. Sayfanın altına geldiğimde bir çevirici göstermeli, ama değil. Maddeler en azından ortaya çıkıyor.İyonik Spinner görünmüyor

HTML:

<!DOCTYPE html> 
<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href=" http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    </head> 
    <body ng-controller="MyCtrl"> 

    <ion-pane> 
     <ion-header-bar class="bar-positive"> 
     <h1 class="title">Ionic Refresher testApp</h1> 
     </ion-header-bar> 
     <ion-content> 
     <ion-refresher on-refresh="doRefresh()" spinner="bubbles"></ion-refresher> 
     <ion-list> 
     <ion-item class="item-thumbnail-left" collection-repeat="item in items | limitTo:numberOfItemsToDisplay"> 
     <img src="img/ionic.png" class="circle"> 
     <p>Link</p> 
    <h2>{{item.id}}</h2> 
    <h2>{{item.title}}</h2> 
     </ion-item> 
     <i class="icon ion-ios-arrow-right"></i> 
     <ion-infinite-scroll 
    on-infinite="addMoreItem()" 
    distance="1%" spinner="bubbles"> 
    </ion-infinite-scroll> 
     </ion-list> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html>

App.js:

angular.module('ionicApp', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

.factory('TweetService', function($http){ 
    var BASE_URL = "http://jsonplaceholder.typicode.com/posts"; 
    var items = []; 



    return { 
    GetFeed: function(){ 
     return $http.get(BASE_URL).then(function(response){ 
     items = response.data; 
     return items; 
     }); 
    }, 
    GetNewTweets: function(){ 
     return $http.get(BASE_URL).then(function(response){ 
     items = response.data; 
     return items; 
     }); 
    } 
    } 
}) 

.controller('MyCtrl', function($scope, $timeout, TweetService) { 
    $scope.items = []; 
    $scope.numberOfItemsToDisplay = 5; 

    TweetService.GetFeed().then(function(items){ 
    $scope.items = items; 
    }); 

    $scope.addMoreItem = function() { 
     if ($scope.items.length > $scope.numberOfItemsToDisplay) 
      $scope.numberOfItemsToDisplay += 5; // load 5 more items 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
     }; 

    $scope.doRefresh = function() { 
    TweetService.GetNewTweets().then(function(items){ 
     $scope.items = items; 

     //Stop the ion-refresher from spinning 
     $scope.$broadcast('scroll.refreshComplete'); 
    }); 
    }; 

});

kaynak

2016-04-04 julien

nerede olduğunu hangi klasörde app.js dosya ???? – lewis4u

Ne yazık ki henüz çözmek değil İşte

Kod olduğunu. pay çalıştığını bu pasajı deneyin

https://forum.ionicframework.com/t/infinite-scrolling-and-collection-repeat-spinner-not-shown/14358

kaynak

2016-04-29 14:17:29

sonsuz kaydırma ile bir sorun daha ...

//css 
.my-spinner{ 
z-index: 99999999 !important; 
position: absolute; 
bottom:0px; 
left:45%; 
right:45%; 
} 


//template 
<ion-infinite-scroll 
    ng-if="!noMoreItemsAvailable" 
    icon="ion-load-d" 
    on-infinite="getpagenation()" 
    distance="1%"> 
    </ion-infinite-scroll> 

<div ng-if="!noMoreItemsAvailable"> 
     <ion-spinner ng-show="ItemLoading" icon="ios" class="spinner spinner-ios my-spinner"> 
</div> 



//js 
$scope.getpagenation = function() { 
     $scope.ItemLoading = true; 
//you can call services 

//have items 
     $scope.ItemLoading = false; 
//no more items 
     $scope.noMoreItemsAvailable = true; 
     $scope.ItemLoading = false; 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
}

kaynak

2017-03-30 09:32:11

İyonik Spinner görünmüyor

cevap

İlgili konular