горизонтальные прокручиваемые карты ionic2

Question

Я новичок в разработке мобильных веб-сайтов. Я использую Ionic2 как свою структуру. В моем приложении я хочу представить пользователям горизонтальное прокручиваемое изображение карт. Это довольно распространено в приложениях на рынке, таких как Google Play, Redbox и т. Д.

Любые указатели или помощь оцениваются. Спасибо!

Answer 1

Взгляните на this codepen от официальной ионной команды. Соответствующие ключевые слова в ion-scrollscrollX=true и

ion-scroll { white-space: nowrap; 
height: 150px } 

Для ion-scroll CSS.

Answer 2

Ионная карта по умолчанию является элементом block. Поэтому правило CSS, чтобы сделать его элементом inline-block, вместо этого делает трюк. И давая ему ширину;

HTML

<ion-scroll scrollX="true"> 
     <ion-card *ngFor="#item of items"> 
      <ion-item> 
      <img src="http://placehold.it/350x150"> 
      </ion-item> 
     </ion-card> 
    </ion-scroll> 

CSS

ion-scroll { 
    white-space: nowrap; 
    height: 150px 
} 

img{ 
    margin: 10px; 
} 

ion-card{ 
    width: 30vw; 
    display: inline-block; 
} 

Это plunker: http://codepen.io/RaymondAtivie/pen/ZORvzd