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

我想在Ionic 3中顯示一個列表。數據來自服務器。所以我用ngFor使用了ion-list。通過這種方式，所有項目都立即呈現，滾動不是很平滑。ion-list vs ion-scroll vs virtualScroll in ionic 3

然後我用虛擬滾動如下：

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

但現在沒有項目呈現在所有。 Github上有很多virtualScroll問題。

然後我決定用離子滾動代替離子列表。現在滾動非常快速&平穩。但我也想收聽scrollStarted & scrollEnd不在離子滾動的事件。

那麼，我應該怎麼做才能達到以下效果： - 顯示圖像列表&項目中的文本。 - 滾動應該很快&平滑。 - ScrollStart & scrollEnd事件，我想聽。 - 還應該有一個scrollTo（x，y，time）類似的方法，以便我可以滾動到任何特定的項目。

編輯：這僅適用於iOS。在android中，ngFor的離子列表工作正常&滾動也不錯。

EDIT2：粘貼TS碼：

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

EDIT3：粘貼HTML片段：

<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：離子信息 CLI包：（在/ usr/local/lib目錄/ node_modules）

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

全球套餐：

Cordova CLI : 6.5.0

本地套餐：

@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

系統：

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

感謝

來源

2017-08-30 Vivek Sinha

，你能否告訴了'ts'文件的代碼嗎？ – Sampath

@Sampath，請參閱edit2。 –

你需要使用它，如下圖所示。注

：的既然你不使用任何自定義組件，您可以使用ion-item代替div

的.html

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

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

</ion-list>

來源

2017-08-30 10:03:12 Sampath

不工作。這與div相同。 –

任何控制檯錯誤？你能展示如何將它綁定在你的'code'上嗎？你沒有把這個部分放在你的問題上。你可以顯示「hotelsarray」的項目嗎？ – Sampath

請參閱我的編輯。我添加了更多的代碼。根本沒有控制檯錯誤。 –

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

回答

相關問題