如何在角度虚拟滚动中水平渲染图像?

时间:2019-09-08 12:50:57

标签: angular angular-cdk-virtual-scroll

我正在尝试水平加载图像,但是无法使用角度虚拟滚动模块实现此目的。请帮助我。

HTML

<div *ngFor="let subjectImages of pathArray$ | async" class="cdk-virtual-scroll-data-source-example">
   <cdk-virtual-scroll-viewport itemSize="300" orientation="horizontal" class="example-viewport">
     <div *cdkVirtualFor="let imgPath of subjectImages">
        <img [src]="imgPath" class="example-item" onerror="this.onerror=null; this.src='assets/nodata1.PNG';">
     </div>
   </cdk-virtual-scroll-viewport>
</div>

CSS

.cdk-virtual-scroll-data-source-example .example-viewport {
  height: 300px;
  width: auto;
  border: 1px solid black;
}

.cdk-virtual-scroll-content-wrapper {
  overflow-x:scroll;
  white-space: nowrap;
}

.example-item {
  height: 300px;
  width: 300px;
}

0 个答案:

没有答案