0

list に画像のリストをロードします。画像の読み込み時間のため、の位置が間違っています

<ion-list class="timeLineList">
    <ion-item collection-repeat="item in items" ng-click="getDetail(item.id)" >
        <!-- ... -->
        <img ng-src="{{item.customer.photoUrl}}">
        <!-- ... -->
    </ion-item>
</ion-list>

ディレクティブと画像が完全に充電されたら、ページを更新する必要があります。

jqueryMobile で $(DOM)trigger("create") のようなソリューションを探しています。

4

1 に答える 1

0

最適な解決策は、 に対してitem-widthおよび/またはitem-heightを設定することcollection-repeatです。

イメージ ギャラリー リストでは、ウィンドウの innerWidth を 4 で割って幅を計算します (4 列の場合)。次に、その Math.floor を取得し、それを高さと幅として割り当てます (正方形の画像が必要でした)。

私のコントローラーには次のものがあります：

ctrl.calculatedHeight = (Math.floor($window.innerWidth/4));

htmlで：

<div
    class="center-box"
    ng-click="ctrl.openMedia(media)"
    collection-repeat="media in ctrl.media"
    item-width="ctrl.calculatedHeight + 'px'"
    item-height="ctrl.calculatedHeight + 'px'"
    item-render-buffer="8"
>
    <img
    ng-if="!media.isLoadingMedia"
    ng-src="{{media.dataUrl}}"
    ng-style="{height: ctrl.calculatedHeight + 'px', width: ctrl.calculatedHeight + 'px'}" />
    <ion-spinner
    ng-if="media.isLoadingMedia"
    ></ion-spinner>
</div>

(読み込み中は、画像ごとにスピナーが表示されます。)

于 2015-12-31T19:38:38.143 に答える