离子列表与离子卷轴与离子3中的virtualScroll

Question

我想用Ionic 3显示一个列表。数据来自服务器。所以我在ngFor中使用了离子列表。这样，所有的项目都会同时呈现，滚动也不是很顺利。

然后，我使用了如下虚拟卷轴：

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

但是现在根本没有任何项目被呈现。许多virtualScroll的问题在吉特布。

然后我决定用离子卷轴代替离子列表。现在滚动是非常快和顺利的。但我也想听听scrollStarted & scrollEnd事件，这不是离子卷轴。

那么，我应该做些什么来实现以下目标：-在项目中显示一个包含图像和文本的列表。-滚动应该是快速和平滑的。- ScrollStart & scrollEnd事件，我想听。-也应该有一个scrollTo(x，y，time)类似的方法，这样我就可以滚动到任何特定的项目。

编辑:这只适用于iOS。在安卓系统中，使用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_node)

@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 

谢谢

Answer 1

您需要使用它，如下所示。

注意：，因为您没有使用任何自定义组件，所以可以使用ion-item而不是div

.html

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

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

</ion-list>