イオンのスクロールは、私がここにこの <a href="http://imgur.com/sElBMCD" rel="nofollow">http://imgur.com/sElBMCD</a></p> <p>のような四角形で正方形のページの負荷をスクロールしたときに、私が持っている

Question

問題がある白いオーバーレイでlagggy私のコードは

categoryList.html

<ion-header-bar align-title="center" class="bar-stable"> 
    <h1 class="title">Best Wishes App</h1> 
</ion-header-bar> 
<ion-content class="padding" overflow-scroll="true"> 
    <div class="list"> 
     <div class="card responsive-card" ng-repeat="item in data"> 
      <a href="#/sublist/{{item.id}}"> 
       <div class="item item-image"> 
        <img ng-src="{{item.image}}" alt="item image"> 
       </div> 
       <div class="item item-divider"> 
        {{item.categoryTitle}} 
       </div> 
      </a> 
     </div> 
    </div> 
</ion-content> 

アプリです.js

angular.module('starter', ['ionic'])    
     .config(function ($stateProvider, $urlRouterProvider) { 
      $stateProvider 
       .state('list', { 
        url: '/', 
        templateUrl: 'template/categoryList.html', 
        controller: 'ListController' 
       })      
      $urlRouterProvider.otherwise("/"); 
     }) 
     .controller('ListController', ['$scope', '$http', '$state', '$ionicHistory', '$rootScope', function ($scope, $http, $state, $ionicHistory, $rootScope) {     
      console.log($rootScope.data); 
      $rootScope.$watch('data',function(){ 
       $scope.data = $rootScope.data; 
      }) 
     }]) 

私はAngularを初めて利用していますあなたの答えを詳細に詳述する必要があるかもしれません。 ：/

は私が私がパッケージ化し、アプリケーションを実行するために、バックグラウンドでコルドバCLIを使用してVisual StudioのIDEを使用して、イオン・フレームワークのバージョン1.7

を使用しています。

Answer 1

すべての要素が同じ高さになることがわかっている場合は、ng-repeatの代わりにイオニクスcollection-repeatを使用することを検討する必要があります。

は、この例を参照してください： http://codepen.io/ionic/pen/0c2c35a34a8b18ad4d793fef0b081693

は、あなたは自分の例のようにお互いに次の二つの項目を設定することができます。

また、JavaScriptでのスクロールを無効にすることをお勧めします。 JavaScriptのスクロールは少しばかりであることが知られています。あなたはconfigでグローバルにこのようなことを行うことができます。

.config(function($ionicConfigProvider) { 
    $ionicConfigProvider.scrolling.jsScrolling(false); 
}) 

を少なくとも最後のではなく、上記のものは、あなたが「遅れ」を見ることができないので、あなたがイメージに怠惰なローダーを使用して検討すべきで働かない場合。私は個人的にイオン画像のレイジーロードプラグインを使用しています。このプラグインは、バワーを介してインストールすることができ、大きな効果があります。私のイメージは、あなたと同じちらつきをしていました。

プラグイン：https://github.com/paveisistemas/ionic-image-lazy-load

例：http://codepen.io/mvidailhet/pen/yNOGzY

うまくいけば、これらはあなたに役立つことが！