Ng-lazyload-image: Gulir horizontal ionic2

Dibuat pada 30 Mei 2017  ·  7Komentar  ·  Sumber: tjoskar/ng-lazyload-image

Berikut ini tidak memuat gambar pada gulir horizontal.

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

image

Komentar yang paling membantu

Berhasil. Kuncinya adalah mengatur scrollTarget ke scroll._scrollContent.nativeElement

Kode lengkap di bawah ini

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

Semua 7 komentar

Hai,

Saya kira lazyContainer.ionScroll hanya memancarkan acara saat menggulir secara vertikal karena alasan tertentu. Bisakah Anda mencoba mencetak nilai ionScroll untuk melihat apakah nilainya memancarkan nilai apa pun saat Anda menggulir.

<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 jangan ragu untuk membuka kembali masalah ini jika masalah masih terjadi

Hai, yang di sana,

Pertama... @tjoskar selamat. Ini berfungsi seperti yang diharapkan pada Ionic 3.9.2. Namun, saya memiliki masalah yang sama dengan ion-scroll. Saya baru saja mencoba mencetak nilai ionScroll dengan pipa async/json dan mengembalikan nol. Jadi saya kira itu alasannya tidak berfungsi.

Adakah solusi untuk masalah ionik ini?

Pembaruan: Saya mencoba hal yang sama dengan contoh yang berfungsi dan juga ionScroll mengembalikan nol?

Berhasil. Kuncinya adalah mengatur scrollTarget ke scroll._scrollContent.nativeElement

Kode lengkap di bawah ini

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

Hai @fmendoza Saya memiliki beberapa baris di mana masing-masing baris harus dapat digulir secara horizontal dan memuat gambar dengan
Namun hanya baris yang terlihat yang menampilkan gambar pada pemuatan pertama.
Menggulir secara vertikal untuk mengekspos baris lain tidak memicu pemuatan gambar.
Saya ingin mengaktifkan pemuatan gambar-gambar ini pada gulir vertikal konten ion saya dan gulir horizontal gulir ion saya
sedemikian rupa sehingga saya membuatnya bekerja dengan dua scrollTargets. satu untuk gulungan ion dan konten ion lainnya
Mohon bantuannya

Saya telah menggunakan peretasan di bawah ini untuk mengatasi masalah memiliki daftar yang digulir secara horizontal berada di luar area pandang dari gulir vertikal konten utama.
Dalam kasus saya, saya tahu bahwa 2 item pertama dari setiap daftar selalu terlihat dalam gulir vertikal konten utama, jadi saya menghubungkan wadah gulir mereka ke <ion-content #content> . Dan item daftar lainnya terhubung ke gulir horizontal <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>
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

AzerHeshim picture AzerHeshim  ·  5Komentar

vugar005 picture vugar005  ·  10Komentar

myrsk picture myrsk  ·  6Komentar

stratio84 picture stratio84  ·  6Komentar

audacitus picture audacitus  ·  5Komentar