在离子幻灯片内显示 3 个项目

Question

我有一个包含 9 到 15 张图像的列表，我可以将其作为列表，单击任何图像时，它将导航到相应的页面。

<ion-slides>
  <ion-slide *ngFor=" let item of animateItems; let i=index ">
     <ion-row >
            <ion-col width-33 style="padding: 3px; "   (click)="openCategory(item.name)">
                <ion-card style="margin: 0px 0px 0px 0px;    width: calc(100%);">
                    <img src="{{item.image}}"  />
                    <p style="    margin-top: -24px;color: #fff;    text-align: center;    text-shadow: 1px 2px 2px #000;">
                        {{item.name}}
                    </p>
                </ion-card>
            </ion-col>
        </ion-row>
 </ion-slide>
</ion-slides>

上面的代码中发生的事情是只显示一个图像，有人可以帮助我在一张幻灯片上显示 3 张图像。 假设我有 12 张图像，因此每张幻灯片中有 3 张幻灯片 应该显示 4 张图像 有人可以帮助我吗

Answer 1

由于您知道数组的长度和图像的数量，因此有两种方法可以做到这一点。但首先两件事：

• 您正在为每个图像创建一张幻灯片，使用 *ngFor 打开ion-slide将为数组中的每个项目创建一个新幻灯片。
• 我不知道你使用的是哪个 Ionic 版本，但在 3.x 上，ion-col 的 width-x 属性已被弃用，请改用col-x(如 Bootstrap(。

1

修改，以便您可以有 3 个数组，每个数组包含四个项目

animateItems1: any[] = [{item: item}, {item: item}, {item: item}, {item: item}];
animateItems2: any[] = [{item: item}, {item: item}, {item: item}, {item: item}];
animateItems3: any[] = [{item: item}, {item: item}, {item: item}, {item: item}];

并为每个数组创建一张幻灯片

<ion-slides>
  <ion-slide>
     <ion-row>
            <ion-col *ngFor=" let item of animateItems1; let i=index " col-3 style="padding: 3px;" (click)="openCategory(item.name)">
                <ion-card style="margin: 0px 0px 0px 0px;    width: calc(100%);">
                    <img src="{{item.image}}"  />
                    <p style="margin-top: -24px;color: #fff; text-align: center; text-shadow: 1px 2px 2px #000;">
                        {{item.name}}
                    </p>
                </ion-card>
            </ion-col>
        </ion-row>
  </ion-slide>
  <ion-slide>
    <!-- The same code as above, but for animateItems2, and then another for animateItems3 -->
  </ion-slide>
</ion-slides>

是的，我知道你必须对每张幻灯片进行编码，但这是一种方式。

阿拉伯数字

你可以嵌套*ngFor，但话又说回来，你需要修改你的数组

animateItems: any[] = [{
  0: [{item: item}, {item: item}, {item: item}],
  1: [{item: item}, {item: item}, {item: item}],
  2: [{item: item}, {item: item}, {item: item}]
}]

和你的 HTML

<ion-slide *ngFor="let item of animateItems: let i = index">
     <ion-row>
            <ion-col*ngFor="let lowerItem of animateItems[i]; let ind = index col-3 style="padding: 3px;" (click)="openCategory(lowerItem.name)">
                <ion-card style="margin: 0px 0px 0px 0px; width: calc(100%);">
                    <img src="{{lowerItem.image}}"  />
                    <p style="margin-top: -24px;color: #fff; text-align: center; text-shadow: 1px 2px 2px #000;">
                        {{lowerItem.name}}
                    </p>
                </ion-card>
            </ion-col>
        </ion-row>
  </ion-slide>

由于我不知道页面的外观，因此我无法帮助CSS和cols部门以及所有内容。但希望这对:)有所帮助