Ng-lazyload-image: Horizontales Scrollen ionic2

Hallo,

Ich vermute, dass lazyContainer.ionScroll aus irgendeinem Grund nur Ereignisse ausgibt, wenn vertikal gescrollt wird. Können Sie versuchen, den Wert von ionScroll zu drucken, um zu sehen, ob beim Scrollen Werte ausgegeben werden.

<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 bitte

Hi,

Zuerst... @tjoskar herzlichen Glückwunsch. Dies funktioniert wie erwartet auf Ionic 3.9.2. Ich habe jedoch das gleiche Problem mit Ionenscrollen. Ich habe gerade versucht, den Wert von ionScroll mit der async/json-Pipe zu drucken und gibt null zurück. Also ich denke, das ist der Grund, warum es nicht funktioniert.

Irgendein Workaround für dieses Ionenproblem?

Update: Ich habe das gleiche mit einem funktionierenden Beispiel versucht und auch ionScroll gibt null zurück?

Habe es zum Laufen gebracht. Der Schlüssel ist, scrollTarget auf scroll._scrollContent.nativeElement

Vollständiger Code unten

`` 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>

Hallo @fmendoza, ich habe mehrere Zeilen, in denen jede horizontal scrollbar und träge Bilder laden sollte
Allerdings zeigen nur sichtbare Zeilen Bilder beim ersten Laden an.
Vertikales Scrollen, um andere Zeilen anzuzeigen, löst nicht das Laden des Bildes aus.
Ich möchte das Laden dieser Bilder beim vertikalen Scrollen meines Ionen-Inhalts und beim horizontalen Scrollen meines Ionen-Scrolls aktivieren
so dass es mit zwei scrollTargets funktioniert. einer für den Ionen-Scroll und der andere für den Ionen-Inhalt
Bitte um Hilfe

Ich habe den folgenden Hack verwendet, um das Problem zu umgehen, dass sich eine horizontal gescrollte Liste außerhalb des Ansichtsfensters des vertikalen Scrollens des Hauptinhalts befindet.
In meinem Fall weiß ich, dass die ersten beiden Elemente jeder Liste immer im vertikalen Scroll des Hauptinhalts sichtbar sind, also verbinde ich ihren Scroll-Container mit <ion-content #content> . Und der Rest der Listenelemente ist mit <ion-scroll scrollX="true" #recentScroll> des horizontalen Bildlaufs verbunden.

<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>