Question

我正在使用Ionic 4，并且尝试创建一个水平滚动，每个项目将是一张卡片。这些卡片会动态显示（带有* ngFor）。

我已经尝试过这样的事情：

   <div class="container">
      <div class="scroll" scrollX="true">
        <ion-card *ngFor="let item of items">
           ... 
        </ion-card>
      </div>
   </div>

我之前搜索过，但是没有用。

我期望的是这样的：



   <ion-row>
      <ion-item>
         <ion-scroll scrollX=true"
            <ion-card *ngFor="let card of cards>
               <ion-card-header>
                  <ion-img src="..."/>
               </ion-card-header>
               <ion-card-content>
                  <p>...</p>
               </ion-card-content>
            </ion-card>
         </ion-scroll>
      </ion-item>
    <ion-row>

因此，基本上，带有* ngFor的卡的滑块可从数据库获取数据。我看到在离子4中，离子滚动不再存在。

Answer 1

.ts文件

slides: any[];
  constructor(public navCtrl: NavController) {
      this.slides = [{
      title: 'Slide 1',
      content: 'Slide 1 content'
    },{
      title: 'Slide 2',
      content: 'Slide 2 content'
    },{
      title: 'Slide 3',
      content: 'Slide 3 content'
    },{
      title: 'Slide 4',
      content: 'Slide 4 content'
    }]
  }

your-file.html

<ion-content padding>
  <ion-slides pager="true">
      <ion-slide *ngFor="let slide of slides">
        <h1>{{ slide.title}}</h1>
        <div style="display:block">
          {{ slide.content }}
        </div>
      </ion-slide>
    </ion-slides>
</ion-content>

尝试此解决方案，希望它将解决您的问题。请看看这个working url

Answer 2

感谢支持人员。我找到了解决方法。

.thumnails{
  overflow-x: scroll;
  overflow-y: hidden;
  .list-thumbnail{
    height: 100%;
    white-space: nowrap;
      .img-thumb{
        display: inline-block;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 3px;
        width: 50px;
        height: 50px;
        margin:0 2px 0 0; 
        line-height: 60px;
     }
  }
}
::-webkit-scrollbar { 
  display: none; 
}

<div class="thumnails">
   <div class="list-thumbnail">
     <div class="img-thumb" [class.selected-img]="filter.selected" *ngFor="let filter of filters">
        <ion-card class="card card__full">
            <ion-card-header no-padding>
              <ion-img [src]="filter.url" style="width: 100%;" </ion-img>
                  </ion-card-header>

               <ion-card-content>
                  <p text-center>{{filter.name}}</p>
               </ion-card-content>
          </ion-card>
      </div>
   </div>
 </div>

如何使用* ngFor使用卡创建水平滚动？

2 个答案: