【ionic】collection-repeatで行の高さを動的にする
まだ調査中。無限スクロール実装するときにng-repeatよりcollection-repeatを使った方がパフォーマンスが良いらしい。とのことで。試していたら行の高さが1行目の高さに合わせられてしまうようで、高さを動的にする場合は高さを計算してやる必要がありそう。
テンプレート
<ion-content> <ion-list> <ion-item class="item-text-wrap item-remove-animate item-avatar item-icon-right" ng-repeat="item in items" item-height="getHeight(item)"> <img ng-src="{{item.face}}"> <h2>{{item.name}}</h2> <p>{{item.lastText}}</p> </ion-item> ・・・ </ion-list> <!-- 計算用に準備 --> <ion-item class="item-text-wrap item-remove-animate item-avatar item-icon-right" id="calculateItem"> <img ng-src=""> <h2></h2> <p></p> </ion-item> </ion-content>
コントローラ
// 計算用DOM var calculateItem = document.getElementById("calculateItem"); // 計算用DOMに値を入れて高さを計算して返す $scope.getHeight = function(item) { var h2 = dummy.getElementsByTagName('h2')[0]; var p = dummy.getElementsByTagName('p')[0]; h2.textContent = item.name; p.textContent = item.lastText; return dummy.clientHeight; };
とりあえずこれで動いた。collection-repeatの方がパフォーマンスが良いとかこのやりかたでパフォーマンスがよいかとかまではまだ調べられていない。以上です。