离子卡滚动 x 方向

Question

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

我尝试使用这个plugin，但它似乎只能与 ion-pane 一起使用，而我正在使用 ion-content。

与此同时，我找到了另一个解决方案 -

<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

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

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

也可以查看example