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

-1

我有一个列表，其中有9到15个图像，我可以将它作为列表并单击将导航到其各自页面的任何图像。显示离子滑块内的3个项目

<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张图片可以有人帮我

来源

2017-05-26 Yokesh Varadhan

既然你知道你的数组长度和图像数量，那么有两种方法可以做到这一点。但首先两件事情：

您正在创建的每张图片幻灯片，使用*ngFor上ion-slide将创建数组中的每一项新的幻灯片。
我不知道您使用的是什么Ionic版本，但在3.x上ion-col的width-x属性已弃用，请使用col-x（如Bootstrap）。

修改，所以你可以有四个项目

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}];

3个阵列和每一个阵列

<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部门和一切。但希望这有助于:)

来源

2017-05-26 12:24:03

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

回答

相关问题