以下は、水平スクロールで画像をロードしません。
<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>
こんにちは、
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>
最も参考になるコメント
動作しました。 重要なのは、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>