ion-list vs ion-scroll vs virtualScroll in ionic 3

Question

Ich möchte eine Liste in Ionic anzeigen 3. Die Daten stammen vom Server. Also habe ich Ion-List mit ngFor benutzt. Auf diese Weise werden alle Elemente auf einmal gerendert und das Scrollen ist nicht sehr flüssig.

Dann habe ich virtuelle Scroll wie folgt:

<ion-list [virtualScroll]="hotelsarray" approxItemHeight="220px"> 
    <div tappable *virtualItem="let hotel" class="item-inner-hotel"> 
    <-- Other Code --> 

Aber jetzt ist kein Element überhaupt gemacht. Viele virtualScroll-Probleme bei Github.

Dann entschied ich mich, Ion-Scroll anstelle von Ion-Liste zu verwenden. Jetzt scrollen ist sehr schnell & glatt. Aber ich möchte auch scrollStarted & scrollEnd Ereignisse, die nicht in Ion-Scroll ist.

Also, was soll ich tun, um Folgendes zu erreichen: - Um eine Liste mit Bildern & Text in Elementen anzuzeigen. - Scrollen sollte schnell sein & glatt. - ScrollStart & scrollEnd Ereignis, auf das ich achten möchte. - Es sollte auch eine Methode scrollTo (x, y, time) geben, damit ich zu einem bestimmten Element blättern kann.

Edit: Dies ist nur für iOS. In Android funktioniert Ion-Liste mit ngFor gut & Scrollen ist auch gut.

Edit2: Einfügen von ts-Code:

public hotelsarray: any; //declaration 
this.hotelsarray = []; // in constructor 
this.hotelsarray = data.results; //after http call 

Edit3: Einfügen von HTML-Schnipsel:

<ion-list [virtualScroll]="hotelsarray" approxItemHeight="220px"> 
    <ion-item *virtualItem="let hotel" class="item-inner-hotel"> 
     <img src="{{hotel.hotelImage}}" class="htl-img"> 
     <h1 class="htl-name">{{hotel.hotelName}}</h1> 
     <h3 class="htl-prc">{{hotel.hotelPrice}}</h3> 
    </ion-item> 
</ion-list> 

Edit4: Ionic info cli Pakete: (/ usr/local/lib/node_modules)

@ionic/cli-utils : 1.9.2 
ionic (Ionic CLI) : 3.9.2 

globale Pakete:

Cordova CLI : 6.5.0 

lokale Pakete:

@ionic/app-scripts : 1.3.0 
Cordova Platforms : android 6.1.2 browser 4.1.0 ios 4.3.1 
Ionic Framework : ionic-angular 3.0.1 

System:

ios-deploy : 1.9.1 
ios-sim : 6.0.0 
Node  : v6.10.2 
npm  : 3.10.10 
OS   : macOS Sierra 
Xcode  : Xcode 8.3.1 Build version 8E1000a 

Dank

Answer 1

Sie müssen es verwenden, wie unten gezeigt.

Hinweis: Da Sie keine benutzerdefinierten Komponenten verwenden, können Sie ion-item statt div

.html

<ion-list [virtualScroll]="hotelsarray"> 

    <ion-item *virtualItem="let hotel"> 
    {{ hotel}} 
    </ion-item> 

</ion-list>