angular - ionic 列表 vs ionic 滚动 vs ionic 3 中的 virtualScroll

Question

我想在 Ionic 3 中显示一个列表。数据来自服务器。所以我将 ion-list 与 ngFor 一起使用。这样所有的项目都被一次渲染并且滚动不是很流畅。

然后我使用虚拟滚动如下:

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

但是现在根本没有渲染任何项目。 Github 上有很多 virtualScroll 问题。

然后我决定使用 ion-scroll 而不是 ion-list。现在滚动非常快速和流畅。但我也想监听不在 ion-scroll 中的 scrollStarted 和 scrollEnd 事件。

那么，我应该怎么做才能实现以下目标: - 显示项目中包含图像和文本的列表。 - 滚动应该快速流畅。 - ScrollStart & scrollEnd 事件，我想听。 - 还应该有一个类似 scrollTo(x, y, time) 的方法，这样我就可以滚动到任何特定项目。

编辑:这仅适用于 iOS。在 android 中，带有 ngFor 的 ion-list 工作正常并且滚动也很好。

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: ionic 信息 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 

谢谢

Answer 1

您需要如下所示使用它。

注意:由于您没有使用任何自定义组件，因此您可以使用 ion-item 而不是 div

.html

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

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

</ion-list>