Question

我有一个用FlexLayoutModule构建的水平滚动条，基本上让我有了一个水平滚动的列表，其中每个项目都是一列图像和文本。这是我的scroller.component.html

中的相关代码

  <div class="ion-activatable container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="10px" *ngFor="let item of items">
    <ion-ripple-effect></ion-ripple-effect>
    <div *ngIf="item.movie || item.title" [routerLink]="'/tabs/discover/movie/'+ (item.movie? item.movie.ids.tmdb: item.ids.tmdb)">
      <ion-img class="poster" [src]="(images$[item.movie? item.movie.ids.tmdb: item.ids.tmdb] | async) || preloaderGif"></ion-img>
      <div class="item-titles">
        {{item.movie? item.movie.title: item.title}}
      </div>
    </div>
</div>

但是，当页面加载完毕时，所有的数百个图像请求都会被触发，这可以从“网络”标签以及我的API报告中看到，我有数百个待处理的请求，并且达到了命中率限制。也许我没有正确使用ion-img，或者某些样式弄乱了它？这是我的scroller.component.scss：

.horizontal {
  white-space: nowrap;
  overflow-x: auto;
}
.poster {
  width: 92px;
  height: 138px;
}
.container {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.item-titles {
  width: 100px;
  white-space: normal;
  text-align: center;
}

我愿意提出建议。也许我应该使用virtual-scroll？但是我看不到如何使它水平。

Answer 1

我已经使用ion-slide完成了这种设计。最好进行一些scss更改以显示下一个元素的一部分。请看下面的代码。

HTML

<ion-slides [options]="slideOpts" class="recent-search">
          <ion-slide *ngFor="let item of recentSearch" class="slide-container" float-left text-left>
            <div class="history-item" (click)="gotoDetailPage(item.id)">
              <div class="container" float-left text-left>
                <div class="bold-text">{{item.companyName}}</div>
                <div>{{item.productName}}</div>
                <div>{{item.descriptor}}</div>
              </div>
            </div>
          </ion-slide>
        </ion-slides>

Scss

.slide-container {
  .history-item {
    width: 100%;
    padding: 3px;
    .container {
      padding: 15px;
      background-color: #fafafa;
      box-shadow: 2px 2px 11px 3px rgba(0, 0, 0, 0.12);
      width: 80%;
      font-size: 12px;
      color: #767676;
      .bold-text {
        font-weight: 700;
      }
      div {
        padding: 4px 0;
      }
    }
  }
}

这是它的样子。

这对我来说非常有用，包含大量数据。希望这对其他人有帮助。

Ionic v4 ion-img会积极加载图像，而不是延迟加载

1 个答案: