Ng-lazyload-image: Rolagem horizontal iônica 2

Oi,

Eu acho que lazyContainer.ionScroll apenas emite eventos ao rolar verticalmente por algum motivo. Você pode tentar imprimir o valor de ionScroll para ver se ele emite algum valor quando você está rolando?

<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 sinta-se à vontade para reabrir este problema se o problema persistir

Olá,

Primeiro ... parabéns @tjoskar . Este trabalho como esperado no Ionic 3.9.2. No entanto, tenho o mesmo problema com o ion-scroll. Acabei de tentar imprimir o valor de ionScroll com o pipe async / json e está retornando null. Então eu acho que é por isso que não está funcionando.

Alguma solução alternativa para esse problema iônico?

Update: Eu tentei o mesmo com um exemplo de trabalho e também o ionScroll está retornando nulo?

Está funcionando. A chave é definir scrollTarget para scroll._scrollContent.nativeElement

Código completo abaixo

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

Olá @fmendoza , tenho várias linhas em que cada uma deve ser rolável horizontalmente e imagens de carregamento lento
No entanto, apenas as linhas visíveis exibem imagens no primeiro carregamento.
Rolar verticalmente para expor outras linhas não aciona o carregamento da imagem.
Eu gostaria de habilitar o carregamento dessas imagens na rolagem vertical do meu conteúdo de íons e na rolagem horizontal da minha rolagem de íons
de modo que ele esteja funcionando com dois scrollTargets. um para a rolagem de íons e o outro para o conteúdo de íons
Por favor, ajude

Usei o hack abaixo para contornar o problema de ter uma lista de rolagem horizontal fora da janela de visualização da rolagem vertical do conteúdo principal.
No meu caso, sei que os 2 primeiros itens de cada lista estão sempre visíveis na rolagem vertical do conteúdo principal, então eu conecto seu contêiner de rolagem a <ion-content #content> . E o resto dos itens da lista estão conectados aos <ion-scroll scrollX="true" #recentScroll> do scroll horizontal.

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