gpt4 book ai didi

angular - 同一页面上的 ionic3 多个滑动 slider

转载 作者:太空狗 更新时间:2023-10-29 17:24:15 28 4
gpt4 key购买 nike

我正在使用 ionic 3,同时在同一页面上放置 3 个滑动 slider 我无法单独控制它们的行为我对 angular js 以及 ts 和 ionic 有点陌生

这是代码

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

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

最佳答案

而不是 ViewChild , 你可以使用 ViewChildren获取该页面中 slider 的所有实例 ( Angular docs )。请看 this working plunker 。最终结果将是这样的:

Slider demo

就像您在 plunker 中看到的那样,我们获取了 slider 的所有实例,然后我们仅通过使用其索引获取目标实例:

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

}

然后在 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>

关于angular - 同一页面上的 ionic3 多个滑动 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44885386/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com