ons-lazy-repeat

このコンポーネント内で描画されるアイテムのDOM要素の読み込みは、画面に見えそうになった時まで自動的に遅延され、 画面から見えなくなった場合にはその要素は動的にアンロードされます。 このコンポーネントを使うことで、パフォーマンスを劣化させること無しに巨大な数の要素を描画できます。

使い方 #

<script>
  ons.bootstrap()

  .controller('MyController', function($scope) {
    $scope.MyDelegate = {
      countItems: function() {
        // Return number of items.
        return 1000000;
      },

      calculateItemHeight: function(index) {
        // Return the height of an item in pixels.
        return 45;
      },

      configureItemScope: function(index, itemScope) {
        // Initialize scope
        itemScope.item = 'Item #' + (index + 1);
      },

      destroyItemScope: function(index, itemScope) {
        // Optional method that is called when an item is unloaded.
        console.log('Destroyed item with index: ' + index);
      }
    };
  });
</script>

<ons-list ng-controller="MyController">
  <ons-list-item ons-lazy-repeat="MyDelegate">
    {{ item }}
  </ons-list-item>
</ons-list>

実例 #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

関連情報 #

属性 #

名前 型 / デフォルト値 概要
ons-lazy-repeat Expression 要素のロード、アンロードなどの処理を委譲するオブジェクトを指定します。AngularJSのスコープの変数名や、通常のJavaScriptの変数名を指定します。 Optional

議論 #