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上width-x ion-col属性已被弃用，请改用col-x（如自举）。

1

修改，这样就可以有3个包含4个项目的数组

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>

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

2

您可以嵌套*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部门以及所有内容。但希望这有助于：）

显示离子滑动内的3个项目

1 个答案:

1

2