Question

我是移动网络开发的新手。我正在使用Ionic2作为我的框架。在我的应用程序中，我想向用户呈现卡片的水平滚动视图。这在Google Play，Redbox等市场应用中很常见。

任何指针或帮助表示赞赏。谢谢！

Answer 1

查看官方离子团队的this codepen。相关关键字为ion-scroll中的ion-scroll { white-space: nowrap; height: 150px }和

ion-scroll

{{1}} css。

Answer 2

离子卡默认为block元素。因此，使CSS成为inline-block元素的CSS规则就可以了。并给它一个宽度;

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

这是一个掠夺者：http://codepen.io/RaymondAtivie/pen/ZORvzd

水平可滚动卡离子2

2 个答案: