离子 2 带离子物品的霍里特佐纳卷轴

Question

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

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

 <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>

任何想法如何使用最新的离子网格系统创建项目的园艺卷轴？(离子 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;

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