ionic3 同一页面上的多个 swiper 滑块

问题描述

限时删除！！

我正在使用 ionic 3，同时在同一页面上放置 3 个 swiper 滑块我无法分别控制它们的行为我对 angular js 以及 ts 和 ionic 有点陌生

这是代码

<ion-slide style="background-color: green" *ngFor="让帖子发帖"><h1>{{post.title}}</h1><img [src]="post.image"/></ion-slide></ion-slides><ion-slides style="height: 30%;"寻呼机><ion-slide style="background-color: green" *ngFor="让帖子发帖"><h1>{{post.title}}</h1><img [src]="post.image"/></ion-slide></ion-slides>

ts 是

 @ViewChild(Slides) 幻灯片:幻灯片；goToSlide() {this.slides.slideTo(2, 500);}ngAfterViewInit() {//this.slides.freeMode = true;this.slides .slidesPerView=3,this.slides.spaceBetween=5;//this.slides.loop=true;}

解决方案

代替 ViewChild，您可以使用 ViewChildren 来获取该页面中滑块的所有实例(

就像你在 plunker 中看到的那样，我们获取了滑块的所有实例，然后我们只使用它的索引获取了目标实例:

import { Component, ViewChildren, QueryList } from '@angular/core';从 'ionic-angular' 导入 { NavController, Content, Slides };@零件({...})导出类主页{@ViewChildren(Slides) 幻灯片:QueryList;构造函数(){}公共移动(索引:编号):无效{this.slides.toArray()[index].slideNext(500);}}

然后在视图中:

<离子导航栏><ion-title>离子演示</ion-title></ion-navbar></ion-header><离子含量填充><ion-slides style="height: 75px" pager><ion-slide><h1>Slide 1</h1></ion-slide><ion-slide><h1>Slide 2</h1></ion-slide><ion-slide><h1>Slide 3</h1></ion-slide></ion-slides><ion-slides style="height: 75px" pager><ion-slide><h1>Slide 1</h1></ion-slide><ion-slide><h1>Slide 2</h1></ion-slide><ion-slide><h1>Slide 3</h1></ion-slide></ion-slides><ion-slides style="height: 75px" pager><ion-slide><h1>Slide 1</h1></ion-slide><ion-slide><h1>Slide 2</h1></ion-slide><ion-slide><h1>Slide 3</h1></ion-slide></ion-slides><离子行><ion-col><button (click)="move(0)" ion-button text-only>Move First</button></ion-col><ion-col><button (click)="move(1)" ion-button text-only>Move Second</button></ion-col><ion-col><button (click)="move(2)" ion-button text-only>Move Third</button></ion-col></ion-row></离子含量>

I am using ionic 3 while placing 3 swiper sliders on same page i am unable to control their behavior separately i am bit new for angular js as well ts and ionic

here is code

<ion-slides style="height: 30%;" pager>
  <ion-slide style="background-color: green" *ngFor="let post of posts">
    <h1>{{post.title}}</h1>
    <img [src]="post.image" />
  </ion-slide>
</ion-slides>


<ion-slides style="height: 30%;" pager>
  <ion-slide style="background-color: green" *ngFor="let post of posts">
    <h1>{{post.title}}</h1>
    <img [src]="post.image" />
  </ion-slide>
</ion-slides>

ts is

 @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(2, 500);

  }

   ngAfterViewInit() {
    //this.slides.freeMode = true;
    this.slides .slidesPerView=3,
    this.slides.spaceBetween=5;
    //this.slides.loop=true;
  }

解决方案

Instead of ViewChild, you can use ViewChildren to get all the instances of the slider in that page (Angular docs). Please take a look at this working plunker. The end result would be something like this:

Like you can see in the plunker, we get all the instances of the slider, and then we just get the target instance by using its index:

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

@Component({...})
export class HomePage {
  @ViewChildren(Slides) slides: QueryList<Slides>;

  constructor() {}

  public move(index: number): void {
    this.slides.toArray()[index].slideNext(500);
  }

}

An then in the view:

<ion-header>
  <ion-navbar>
    <ion-title>Ionic Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-slides style="height: 75px" pager>
    <ion-slide><h1>Slide 1</h1></ion-slide>
    <ion-slide><h1>Slide 2</h1></ion-slide>
    <ion-slide><h1>Slide 3</h1></ion-slide>
  </ion-slides>

  <ion-slides style="height: 75px" pager>
    <ion-slide><h1>Slide 1</h1></ion-slide>
    <ion-slide><h1>Slide 2</h1></ion-slide>
    <ion-slide><h1>Slide 3</h1></ion-slide>
  </ion-slides>

  <ion-slides style="height: 75px" pager>
    <ion-slide><h1>Slide 1</h1></ion-slide>
    <ion-slide><h1>Slide 2</h1></ion-slide>
    <ion-slide><h1>Slide 3</h1></ion-slide>
  </ion-slides>

  <ion-row>
    <ion-col>
      <button (click)="move(0)" ion-button text-only>Move First</button>
    </ion-col>
    <ion-col>
      <button (click)="move(1)" ion-button text-only>Move Second</button>
    </ion-col>
    <ion-col>
      <button (click)="move(2)" ion-button text-only>Move Third</button>
    </ion-col>
  </ion-row>

</ion-content>

这篇关于ionic3 同一页面上的多个 swiper 滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..