ionic3多个滑动滑块位于同一页面上 [英] ionic3 multiple swiper sliders on samepage

问题描述

我正在使用离子3同时在同一页面上放置3个滑动滑块我无法分别控制它们的行为我对角度js以及ts和离子有点新的

这里是代码

 < ion-slides style =height：30％;寻呼机GT; 
< 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％;寻呼机GT; 
< ion-slide style =background-color：green* ngFor =let post of posts> 
< h1> {{post.title}}< / h1> 
< img [src] =post.image/> 
< / ion-slide> 
< / ion-slides> 
  

ts

  @ViewChild（幻灯片）幻灯片：幻灯片; 
 
 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中看到滑块的所有实例，然后我们通过使用索引来获取目标实例：

 从'@ angular / core'导入{Component，ViewChildren，QueryList};来自'ionic-angular'的
 import {NavController，Content，Slides}; 
 
 @Component（{...}）
导出类主页{
 @ViewChildren（幻灯片）幻灯片：QueryList< Slides> ;; 
 
 constructor（）{} 
 
 public move（index：number）：void {
 this.slides.toArray（）[index] .slideNext（500） ; 
} 
 
} 
  

然后在视图中：

 < ion-header> 
< ion-navbar> 
< ion-title> Ionic Demo< / ion-title> 
< / ion-navbar> 
< / ion-header> 
 
< ion-content padding> 
 
< ion-slides style =height：75pxpager> 
< ion-slide>< h1> Slide 1< / h1>< / ion-slide> 
< ion-slide>< h1>幻灯片2< / h1>< / ion-slide> 
< ion-slide>< h1> Slide 3< / h1>< / ion-slide> 
< / ion-slides> 
 
< ion-slides style =height：75pxpager> 
< ion-slide>< h1> Slide 1< / h1>< / ion-slide> 
< ion-slide>< h1>幻灯片2< / h1>< / ion-slide> 
< ion-slide>< h1> Slide 3< / h1>< / ion-slide> 
< / ion-slides> 
 
< ion-slides style =height：75pxpager> 
< ion-slide>< h1> Slide 1< / h1>< / ion-slide> 
< ion-slide>< h1>幻灯片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> 
  

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多个滑动滑块位于同一页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！