离子3 - 离子载玻片在浏览器上不工作

问题描述：

在离子3中，我使用离子载玻片;在Android和iOs应用程序中一切正常：我可以滑动每一行，其他行保持不变。离子3 - 离子载玻片在浏览器上不工作

在试图使用鼠标“滑动”的浏览器上没有任何按预期工作;如果我刷第一行，第二行和第三行的幻灯片也会改变位置。

这是我的模板：

<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>

什么我失踪？

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

我应该如何初始化滑块？

在组队，探索我应该设置：

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

如果使用浏览器，你检查的移动设备（如iPhone 4）和命中重装，不它如预期一样？ – maninak

是的，它完美的工作 – madHorse

答

检查，它有你需要的一切。

你可以，例如有一个按钮去这样的下一张幻灯片：

<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(); }); 
    } 
}

我有多个幻灯片行。当我点击按钮时（如在答案中），只有第一行中的幻灯片继续前进。也许我应该拥有和幻灯片行一样多的@ViewChild实例;但我不知道如何 – madHorse

从你的问题中不清楚你有多行。然后只需使用'@ ViewChildren'。检查我上面的更新代码。 – maninak

非常感谢您的提示。为了避免所有的幻灯片在一起移动，我已经找到了这种方式： 'nextSlide（i）{this.slides.forEach（（slides，index）=> {index == i} {slides.slideNext（）; } }） \t}' 有没有更好的方法来获得相同的结果？ – madHorse

离子3 - 离子载玻片在浏览器上不工作

相关推荐