Question

我想知道如何快速显示正在使用的复杂元素的列表。我有每个具有20ish属性的实体列表，并且正在建立一个可能使用每个实体一半的列表：

  <ion-card *ngFor="let item of getCurrentList()" class="fadeIn">
        <ion-item-sliding>
            <ion-item button no-padding lines="none" (click)="showDetail(item.id)">
                <ion-thumbnail slot="start" class="collectionThumb">
                    <img-loader class="gameImg" [src]="item.image.S80"></img-loader>
                </ion-thumbnail>
                <ion-label>
                    <h2 text-wrap>{{item.title}} ({{item.edition}})</h2>
                    <progress-bar [progress]="getFloatNote(item.rating)"></progress-bar>
                    <ion-chip color="primary">
                        <ion-icon name="people"></ion-icon>
                        <ion-label>{{item.players_min}} - {{item.players_max}}</ion-label>
                    </ion-chip>
                    <ion-chip color="primary">
                        <ion-icon src="../assets/icon/cake.svg"></ion-icon>
                        <ion-label>{{item.age_min}}+</ion-label>
                    </ion-chip>
                    <ion-chip color="primary">
                        <ion-icon name="time"></ion-icon>
                        <ion-label>{{item.duration}}'</ion-label>
                    </ion-chip>
                </ion-label>
            </ion-item>
            <ion-item-options *ngIf="currentTab == 'collection'">
                <ion-item-option (click)="deleteItem(item)" color="danger">
                    <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>

                <ion-item-option (click)="editNoteModal(item)" color="secondary">
                    <ion-icon slot="icon-only" name="create"></ion-icon>
                </ion-item-option>
                <ion-item-option (click)="addPlayModal(item)" color="tertiary">
                    <ion-icon slot="icon-only" src="../assets/icon/dice.svg"></ion-icon>
                </ion-item-option>
    </ion-item-options>
        </ion-item-sliding>
    </ion-card>

我有2个不同的列表，没有要使用同一模板显示的重叠元素，并且我使用标签在它们之间进行切换（收藏夹<->愿望清单）当我选择一个选项卡时，change事件会修改“ currentTab”属性，Angular magic会使用“ getCurrentList（）”来获取新列表。

 <ion-segment color="primary" (ionChange)="switchList($event)">
        <ion-segment-button checked value="collection" class="segmentButton">
            <ion-label>Collection
                <ion-badge color="medium">{{boardGames.filteredCollection.length}}</ion-badge>
            </ion-label>
        </ion-segment-button>
        <ion-segment-button value="wishlist" class="segmentButton">
            <ion-label>Wishlist
                <ion-badge color="medium">{{boardGames.filteredWishList.length}}</ion-badge>
            </ion-label>
        </ion-segment-button>


 public getCurrentList(): BoardGame[] {
    if (this.currentTab == 'collection') {
      return this.boardGames.filteredCollection;
    } else {
      return this.boardGames.filteredWishList;
    }
  }

因此，所有多达40个元素的所有这些都可以很好地工作，但是超过了这一点，它就开始变得怪异了。首先，选项卡上的涟漪效应看起来有问题，几秒钟后触发该效应，并且当列表变为大约100个元素时滞后，随着数字的增加它变得越来越差。我对相同元素有另一种看法，但只带有图像和标题，显示速度更快。

我尝试为每个按钮上的单个<ion-segment>更改(click)上的事件，但没有更改显示问题。

您可以看到我正在使用离子框架，但我认为这不是问题所在。

我想知道的是：

我要构建的列表是否太复杂而无法平滑？
将<ion-card>用作组件可以提高性能吗？
我以可怕的方式交换了两个列表吗？
是否有一种方法可以确保先呈现波纹效果，然后呈现列表的计算将在之后进行：我可以添加一个内容中的微调框，即使花费一些时间也没问题
如果我创建一种可以发送的可观察物，那将是最好的逐步列出元素？

我很开放的态度，请帮忙！

谢谢。

Answer 1

好吧，所以在进一步研究之后，离子框架为您提供了现成的答案：<ion-virtual-scroll> Ionic Doc

在给定元素数组的情况下，它只需处理足够多的元素即可填充视图。因此，无论列表的长度如何都不重要，现在的性能非常好！

无论如何，我想对列表交换方法和组件解决方案有意见，这会改善性能吗？

使用ngFor和制表符进行复杂的列表呈现

1 个答案: