OnsenUIのons-lazy-repeatをリストの要素番号を取得する

6007 ワード
JavaScript ons-lazy-repeat onsenui monaca JavaScript テキストリンク

はじめに

OnsenUIのons-lazy-repeatを使ってons-listを表示させ、タップしたリストの要素番号を取得するプログラムをご紹介します。
今回は基本的なOnsenUIを使って実装していきます。
※Angular,React,Vueのフレームワークは使用しません。

ons-lazy-repeat

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

コードや基本的な情報はOnsenUIのサイトに公開してあります。
https://ja.onsen.io/v2/api/js/ons-lazy-repeat.html

コード

index.html
<ons-list>
  <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
</ons-list>
app.js
ons.ready(function() {
  //infinite-listを取得
  var infiniteList = document.getElementById('infinite-list');

  infiniteList.delegate = {
    //repeatさせたいリストを作成 ※iはcountItemsでのデータ数
    createItemContent: function(i) {
      //dataは関数に渡したい値をいれてください
      return ons.createElement('<ons-list-item data="'+ i +' onclick="showIndex('+ i +')" tappable">Item '+ i +'</ons-list-item>');
    },
    countItems: function() {
      //データ数
      return 10000;
    }
  };

  infiniteList.refresh();
});

function showIndex(index){
  ons.notification.alert(index+'　がタップされました');
}

実行

はまったこと

ons-list-itemの要素にdata="i"を加えないと引数が存在しないとエラーが出ました。

app.js
createItemContent: function(i) {
  //dataは関数に渡したい値をいれてください
  return ons.createElement('<ons-list-item data="'+ i +' onclick="showIndex('+ i +')" tappable">Item '+ i +'</ons-list-item>');
}

※ただしオブジェクトを渡すことはできないみたいです。

まとめ

今回はons-list-itemをタップしたときに値を関数に渡しましたがリストだけでなくさまざまなモノにも適用できるのでぜひ使ってみてください！！
※ただしオブジェクトを渡すことはできないみたいです。