はじめに
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をタップしたときに値を関数に渡しましたがリストだけでなくさまざまなモノにも適用できるのでぜひ使ってみてください!!
※ただしオブジェクトを渡すことはできないみたいです。