Ng-lazyload-image: 水平滚动 ionic2

你好，

我猜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祝贺。 这在 Ionic 3.9.2 上按预期工作。 但是，我对 ion-scroll 有同样的问题。 我只是尝试使用 async/json 管道打印 ionScroll 的值并返回 null。 所以我想这就是不起作用的原因。

这个离子问题有什么解决方法吗？

更新：我在一个工作示例中尝试了相同的方法，并且 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 个项目始终在主要内容的垂直滚动中可见，因此我将它们的滚动容器连接到<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>