イオンアイテムを使ったイオン2つの水平スクロール

Question

私はアバターの一覧を作成しようとしています。そして、各アバターは前のアバターの右側に表示されます。アバターが画面の最後に到達すると、ユーザーはより多くのアバターを見るために左右にスクロールすることができます。

これは以前のイオングリッドバージョンで働いていた次のコードでこれを達成しましたが、今は機能しなくなり、アバターが画面の最後に到達したときに、同じ行に続けて新しい行が追加されますオプションはhoritzonallyスクロールします：私は、最新のイオングリッドシステムを使用してアイテムのhortizonalスクロールを作成する方法

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

} このスクロールは、すべてのデバイスとブラウザ上で動作します。 私のスクロールが役立つかもしれません。