Ich bin neu in der mobilen Web-Entwicklung. Ich benutze Ionic2 als mein Framework. In meiner App möchte ich den Benutzern eine horizontale scrollbare Ansicht von Karten präsentieren. Dies ist ziemlich häufig in Apps auf dem Markt wie Google Play, Redbox usw.horizontale scrollbare Karten ionic2
Alle Hinweise oder Hilfe wird geschätzt. Danke!
Werfen Sie einen Blick auf this codepen von der offiziellen Ionen-Team. Die entsprechenden Schlüsselwörter sind scrollX=true im ion-scroll und
ion-scroll { white-space: nowrap;
height: 150px }
Für die ion-scroll css.
gelöst Leider tut es das nicht arbeiten, wenn ich dieses Bild in Ionen-Karte einbetten. '
Die Ionenkarte ist standardmäßig ein block Element. Also eine CSS-Regel, um es zu einem inline-block Element zu machen, macht den Trick. Und gib ihm auch eine Breite;
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;
}
Dies ist ein Plunker: http://codepen.io/RaymondAtivie/pen/ZORvzd
Verwenden Sie die 'Ionen slides' Komponente und in jeder Folie verwenden, um eine' Ionen card' Komponente http : //ionicframework.com/docs/v2/components/#slides –
Ich habe dieses Problem mit scrollX = "true" und –