Question

我正在使用Ionic Framework来构建Android应用程序。我需要显示水平可滚动的卡片。每张卡片都会显示产品图片，产品标题，产品价格和按钮。我尝试在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;
}

此解决方案的问题在于，我只能检索图像而不是其他细节。

Answer 1

你应该研究离子的内置ion-scroll。你的代码看起来像这样。另请查看此示例

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

另请查看此example

离子卡滚动x方向

1 个答案: