Ng-lazyload-image: التمرير الأفقي الأيوني 2

مرحبا،

أعتقد أن 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. ومع ذلك ، لدي نفس المشكلة مع التمرير الأيوني. لقد حاولت للتو طباعة قيمة ionScroll باستخدام أنبوب غير متزامن / json وإرجاع القيمة فارغة. لذلك أعتقد أن هذا السبب لا يعمل.

أي حل بديل لهذه المشكلة الأيونية؟

تحديث: لقد جربت نفس الشيء مع مثال عملي وأيضًا يعود برنامج ionScroll فارغًا؟

حصلت على العمل. المفتاح هو تعيين 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 لدي صفوف متعددة حيث يجب أن يكون كل منها صورًا قابلة للتمرير أفقيًا وكسولة
ومع ذلك ، فإن الصفوف المرئية فقط تعرض الصور عند التحميل الأول.
لا يؤدي التمرير العمودي لكشف الصفوف الأخرى إلى تحميل الصورة.
أرغب في تمكين تحميل هذه الصور في التمرير الرأسي لمحتوى الأيونات الخاص بي والتمرير الأفقي للتمرير الأيوني الخاص بي
بحيث أعمل مع اثنين من scrollTargets. واحد للتمرير الأيوني والآخر محتوى أيون
يرجى مساعدة

لقد استخدمت الاختراق أدناه لحل مشكلة وجود قائمة يتم تمريرها أفقيًا خارج إطار العرض للتمرير الرأسي للمحتوى الرئيسي.
في حالتي ، أعلم أن أول عنصرين من كل قائمة يكونان دائمًا مرئيين داخل التمرير الرأسي للمحتوى الرئيسي ، لذلك أقوم بتوصيل حاوية التمرير الخاصة بهم بـ <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>