Question

我目前在ionic3框架中工作

我需要一些帮助

在我的项目中，我有很多图像

我需要在同一行显示所有图像

以同样的方式，当用户尝试移动图像时，图像将需要从右向左移动

有任何想法吗??

例如它就像音乐应用

在音乐应用程序中，有一个主题为“新版本”，我需要在同一行显示所有图像。

Answer 1

Ionic提供slides组件。您可以使用滑块组件以水平方式显示所有图像，并且可由用户滚动。在此处查看组件文档：slides in ionic 3

或者，您也可以使用<ion-scroll>。您可以指定滚动方向，它将为您提供用户可滚动区域。 ion-scroll的文档：ion-scroll for scrollable area in ionic 3

Answer 2

你可以用两种方式做;一个使用slides和ion-scroll。我建议使用slides。好的将向您展示slides示例：

  <ion-slides pager="true">
    <ion-slide *ngFor="let slide of slides">
      <img [src]="slide.MediaUrl">
    </ion-slide>
  </ion-slides>

@josh为离子幻灯片创建教程like here

您还可以查看官方文档official like

Answer 3

一个简单的想法是：有三件事：

容器包含所有内容（overflow: auto）
另一个容器包含您的所有图片（display: inline-flex）
图片

<div style="height: 100px; width: 100%; overflow: auto">
    <div style="height: 100%; display: inline-flex">
        <div *ngFor="let i of [1,2,3,4,5,6,7,8,9]" class="image"></div>
    </div>
</div>

例如我的图片：

.image {
    width: 100px;
    height: 100%;
    border: 1px solid;
}

您可以在此处详细了解Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这可以提供帮助。

如何使用ionic3在同一行显示所有图像

3 个答案: