角度 – 离子3多个滑动滑块在同一页面上

发布时间：2020-12-17 07:49:21 所属栏目：安全来源：网络整理

导读：我使用离子3同时在同一页面上放置3个滑动滑块我无法分别控制它们的行为我对角度js以及ts和离子有点新这是代码 ion-slides style="height: 30%;" pager ion-slide style="background-color: green" *ngFor="let post of posts" h1{{post.title}}/h1 img [src

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

这是代码

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

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

您可以使用ViewChildren来获取该页面中滑块的所有实例( Angular docs),而不是ViewChild.请看一下 this working plunker.最终结果是这样的：

就像你在plunker中看到的那样,我们得到了滑块的所有实例,然后我们通过使用它的索引来获取目标实例：

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

}

然后在视图中：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!