Question

我想在Ionic 3中显示一个列表。数据来自服务器。所以我在ngFor中使用了ion-list。这样，所有项目一次渲染，滚动不是很平滑。

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

.
.
.
Guid guid = Guid.NewGuid();

// Create a client
AmazonS3Client client = new AmazonS3Client(_awsAccessKey, _awsSecretKey);

// Create a PutObject request
PutObjectRequest request = new PutObjectRequest
{
    BucketName = "...",
    CannedACL = S3CannedACL.PublicRead,
    Key = "images/" + guid + "-" + file.FileName
};

using (System.IO.Stream inputStream = file.InputStream)
{
    request.InputStream = inputStream;

    // Put object
    PutObjectResponse response = client.PutObject(request);
}
.
.
.

但现在根本没有渲染任何物品。 Github上的许多virtualScroll问题。

然后我决定使用离子滚动而不是离子列表。现在滚动非常快＆amp;平滑。但我也想听听scrollStarted＆amp; scrollEnd不在离子滚动中的事件。

那么，我该怎么做才能实现以下目标： - 显示带有图像和列表的列表项目中的文字。 - 滚动应该快速＆amp;平滑。 - ScrollStart＆amp; scrollEnd事件，我想听。 - 还应该有一个scrollTo（x，y，time）方法，以便我可以滚动到任何特定项目。

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

Edit2：粘贴ts代码：

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

Edit3：粘贴html代码段：

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

Edit4：离子信息 cli包：（/ usr / local / lib / node_modules）

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

全球套餐：

@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

由于

Answer 1

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

注意：由于您未使用任何自定义组件，因此可以使用ion-item代替div

html的

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

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

</ion-list>

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

1 个答案: