Question

在离子3中使用离子载玻片;在Android和iOs app上一切正常：我可以刷每一行而其他行保持不变。

浏览器尝试＆＃34;刷卡＆＃34;使用鼠标没有按预期工作;如果我滑动第一行，第二行和第三行中的幻灯片也会改变位置。

这是我的模板：

<ion-card *ngFor="let channel of channels; let i = index;">
        <ion-card-header {{channel.title}}</ion-card-header>
        <ion-card-content>
            <ion-slides slidesPerView=4 spaceBetween="5">
                <ion-slide *ngFor="let video of channels[i].playlist">
                    <img src="https://.../thumbs/{{video.mediaid}}"/>
                </ion-slide>
            </ion-slides>
     </ion-card-content>
 </ion-card>

什么＆＃39;我失踪了？

我也尝试使用next和prev按钮，但我找不到通过swiper选项的方法（来自Ionic 3.0.0幻灯片输入选项已被删除）。

我应该如何初始化滑块？

在Swiper我应该设置：

{ ...,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
...
}

Answer 1

检查Slide documentation，它包含您需要的一切。

例如，您可以按下按钮进入下一张幻灯片：

<button ion-button (click)="goToNextSlide()">Next</button>

import { QueryList, ViewChildren } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChildren(Slides) slides: QueryList<Slides>;

  goToNextSlide() {
    this.slides.forEach((slide) => { slide.next(); });
  }
}

离子3 - 离子滑动在浏览器上不起作用

1 个答案: