Ng-lazyload-image: 水平スクロールionic2

作成日 2017年05月30日  ·  7コメント  ·  ソース: tjoskar/ng-lazyload-image

以下は、水平スクロールで画像をロードしません。

            <ion-scroll scrollX="true" #lazyContainer>
                <!--<img class="thumbnail-avatar" *ngFor="let item of items" src="http://placehold.it/350x150">-->
                <img class="thumbnail-avatar-square spacer" *ngFor="let item of recent"
                     (click)="tapped(item)"
                     [scrollObservable]="lazyContainer.ionScroll"
                     [lazyLoad]="item.avatar">
            </ion-scroll>

image

最も参考になるコメント

動作しました。 重要なのは、scrollTargetをscroll._scrollContent.nativeElement

以下の完全なコード

`` javascript <ion-scroll scrollX="true" direction="x" #scroll1> <div class="item" margin *ngFor="let item of newItems" (click)="goToItemPage(item)"> <img src="./assets/imgs/placeholder.png" [lazyLoad]="item.photoThumb?.url()" [scrollTarget]="scroll1._scrollContent.nativeElement" /> <div text-center text-wrap> <p no-margin>{{ (item.shortName || item.name) | excerpt:17 }}</p> </div> </div> </ion-scroll>

全てのコメント7件

こんにちは、

lazyContainer.ionScrollは、何らかの理由で垂直方向にスクロールしたときにのみイベントを発行すると思います。 ionScroll値を出力して、スクロール時に値が出力されるかどうかを確認できますか?

<ion-scroll scrollX="true" #lazyContainer>
  <img class="thumbnail-avatar-square spacer" *ngFor="let item of recent"
    (click)="tapped(item)"
    [scrollObservable]="lazyContainer.ionScroll"
    [lazyLoad]="item.avatar">
  {{ lazyContainer.ionScroll | async | json }}
</ion-scroll>

@kodeineそれでも問題が発生する場合は、この問題を再開してください。

やあ、

まず... @ tjoskarおめでとう

このイオンの問題の回避策はありますか?

更新:実際の例で同じことを試しましたが、ionScrollがnullを返していますか?

動作しました。 重要なのは、scrollTargetをscroll._scrollContent.nativeElement

以下の完全なコード

`` javascript <ion-scroll scrollX="true" direction="x" #scroll1> <div class="item" margin *ngFor="let item of newItems" (click)="goToItemPage(item)"> <img src="./assets/imgs/placeholder.png" [lazyLoad]="item.photoThumb?.url()" [scrollTarget]="scroll1._scrollContent.nativeElement" /> <div text-center text-wrap> <p no-margin>{{ (item.shortName || item.name) | excerpt:17 }}</p> </div> </div> </ion-scroll>

こんにちは@fmendoza複数の行があり、それぞれが水平方向にスクロール可能で遅延読み込み画像である必要があります
ただし、最初の読み込み時に画像が表示されるのは表示されている行のみです。
他の行を表示するために垂直方向にスクロールしても、画像の読み込みはトリガーされません。
イオンコンテンツの垂直スクロールとイオンスクロールの水平スクロールでこれらの画像をロードできるようにしたい
2つのscrollTargetsで動作するようにします。 1つはイオンスクロール用で、もう1つはイオン含有量用です。
親切に支援してください

以下のハックを使用して、水平方向にスクロールされたリストがメインコンテンツの垂直方向のスクロールのビューポートの外側にあるという問題を回避しました。
私の場合、すべてのリストの最初の2つのアイテムが常にメインコンテンツの垂直スクロール内に表示されることを知っているので、それらのスクロールコンテナーを<ion-content #content>に接続します。 そして、残りのリスト項目は、水平スクロールの<ion-scroll scrollX="true" #recentScroll>接続されています。

<ion-content #content>
        <!-- more ion-scrolls here -->
    <ion-scroll #recentScroll scrollX="true">
        <ng-container *ngFor="let subitem of recentItems; let i = index">
            <horizontal-item [item]="subitem" 
                                [scrollContainer]="content._scrollContent.nativeElement" 
                                (openItem)="showItemDetails($event, true)"
                    *ngIf="i < 2"></horizontal-item>
            <horizontal-item [item]="subitem" 
                                [scrollContainer]="recentScroll._scrollContent.nativeElement"
                                (openItem)="showItemDetails($event, true)"
                   *ngIf="i >= 2"></horizontal-item>
        </ng-container>
    </ion-scroll>
        <!-- more ion-scrolls here -->
</ion-content>
このページは役に立ちましたか?
0 / 5 - 0 評価