Question

我正在尝试创建一个头像列表，每个头像都出现在上一个头像的右侧。当头像到达屏幕的末尾时，用户将能够向左或向右滚动以查看更多头像。

我使用以下离子网格版本中的代码实现了这一点，现在不再有效，当一个头像到达屏幕的末尾时，会创建一个新行，而不是将其添加到同一行中。滚动horitzonally的选项：

 <ion-scroll scrollX="true" class="chooseBg" style="height:70px">
           <ion-row>
             <ion-col *ngFor="let avatar of avatars"
             style="padding-right:0">
           <ion-item>
             <ion-avatar>
               <img
               [src]="avatarImage(avatar)"/>
             </ion-avatar>
             </ion-item>
             </ion-col>
             </ion-row>
        </ion-scroll>

如何使用最新的离子网格系统创建hortizonal滚动项目？（离子2.2）

Answer 1

这是我的水平滚动版，里面有可点击的卡片：

    <ion-scroll scrollX="true" class="item" style="width:100vw;height:100%;margin:0px;padding:0px;">
        <ion-row>
          <ion-col >
          <ion-card tabable class="card-width" (click)='categorieDetail("Rap")'>
              <img style="width:33vw;" src="assets/img/rap.png"/>
              <div text-wrap class="card-title-mini">Rap</div>
          </ion-card>
      </ion-col>
      <ion-col >
        <ion-card tabable class="card-width" (click)='categorieDetail("Singing")'>
          <img style="width:33vw;" src="assets/img/sing.png"/>
          <div text-wrap class="card-title-mini">Singing</div>
        </ion-card>
      </ion-col>
            <ion-col >
        <ion-card tabable class="card-width" (click)='categorieDetail("Skateboard")'>
          <img style="width:33vw;" src="assets/img/skateboarding.png"/>
          <div text-wrap class="card-title-mini">Skateboard</div>
        </ion-card>
      </ion-col>
      <ion-col >
        <ion-card tabable class="card-width" (click)='categorieDetail("Workout")'>
          <img style="width:33vw;" src="assets/img/workout.png"/>
          <div text-wrap class="card-title-mini">Workout</div>
        </ion-card>
      </ion-col>
      <ion-col >
          <ion-card tabable class="card-width" (click)='categorieDetail("Drawing&nbsp;Tattoo")'>
              <img style="width:33vw;" src="assets/img/drawingtattoo.png"/>
              <div text-wrap class="card-title-mini">Drawing Tattoo</div>
          </ion-card>
      </ion-col>
      <ion-col >
          <ion-card tabable class="card-width" (click)='categorieDetail("Shuffle")'>
              <img style="width:33vw;" src="assets/img/shuffle.png"/>
              <div text-wrap class="card-title-mini">Shuffle</div>
          </ion-card>
      </ion-col>
        <ion-col >
          <ion-card tabable class="card-width" (click)='categorieDetail("Gaming")'>
              <img style="width:33vw;" src="assets/img/gaming.png"/>
              <div text-wrap class="card-title-mini">Gaming</div>
          </ion-card>
      </ion-col>
      <ion-col >
        <ion-card tabable class="card-width" (click)='categorieDetail("Beatbox")'>
          <img style="width:33vw;" src="assets/img/beatbox.png"/>
          <div text-wrap class="card-title-mini">Beatbox</div>
        </ion-card>
      </ion-col>
        </ion-row>
    </ion-scroll>

它的硬编码，但你也可以像使用* ngFor一样填充它。

这是我的css：

 ion-card {
    position: relative;
    text-align: center;
    margin: 0;
  }
  .column-width {
    width: 100px;
  }
      .card-width {
      width: 33vw;
      padding: 0px !important;
      margin: 0px !important;
      background-color : transparent;
      color : transparent;
      height: 33vw;
  }

.card-title-mini {
position: absolute;
top: 45%;
font-size: 5vw;
width: 100%;
color: #fff;
  font-weight: bold;

} 此滚动适用于所有设备和浏览器。也许我的卷轴可能对你有所帮助。

离子2 horitzonal卷轴与离子项目

1 个答案: