离子卡向x轴方向滚动

我正在使用Ionic Framework构建Android应用程序。我需要显示水平可滚动的卡片。每张卡片将显示产品图片，产品标题，产品价格和按钮。我尝试在x方向上使用ion scroll，但是卡片似乎没有在x方向上滚动。离子卡向x轴方向滚动

我试过使用这个plugin，但它似乎只能用于离子窗格，我正在使用离子内容。

在此期间，我发现了另一个解决方案 -

<div class="cardHolder"> 
       <ul> 
        <div> 
         <img ng-repeat="feature in featured track by $index" ng-src="{{feature.featured_image.source}}" class="examplePic" > 
</div> 
      </div>

CSS

.cardHolder { 
    height: 200px; 
    width:100%; 
    padding: 8px; 
    margin: 6px; 
} 

ul { 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 


.examplePic { 
    height: 150px; 
    width: auto; 
    border:1px solid black; 
    margin: 2px; 
}

这种解决方案的问题是，我只能够检索图像，而不是其他细节。

来源

2015-11-03 vkm

你应该看看离子的内置ion-scroll。你的代码看起来像这样。也结帐这个例子

<ion-scroll direction="x">` 
....your scrollable content here... 
</ion-scroll>

也结帐此example

来源

2016-01-24 19:15:39 garrettmac

离子卡向x轴方向滚动

回答

相关问题