我有一个包含ion-slides元素的模态。在主页中,我有(click)
使用滑块打开模式的图像的缩略图。我需要选择slideTo
带有缩略图索引的滑块,但还没有让它工作。
我已经完成将正确的索引传递给模态并验证它是否记录到控制台。在ionic 4 文档中,我们被定向到swiper 文档,在那里可以看到该slideTo
方法存在,但是当滑块由 ionic 初始化时,我只是不知道如何使用它。我按照教程让模态和滑块运行,除了在右侧幻灯片上打开滑块外,一切都很好。我已经尝试过多种方式来遵循 swiper 文档。此外,滑块的缩略图数组和图像数组相同,因此索引匹配。
这里是模态/滑块的 ts 文件:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
@Component({
selector: 'app-zoom-modal',
templateUrl: './zoom-modal.component.html',
styleUrls: ['./zoom-modal.component.scss'],
})
export class ZoomModalComponent implements OnInit {
images: any;
index: number;
img: any;
@ViewChild('slider', { static: false })slider: ElementRef;
sliderOpts = {
zoom: {
maxRatio: 3,
},
slideTo: this.index // doesn't work
};
constructor(private navParams: NavParams, private modalController: ModalController) { }
ngOnInit() {
console.log(this.index);
}
zoom(zoomIn: boolean){
let zoom = this.slider.nativeElement.swiper.zoom;
if (zoomIn) {
zoom.in();
} else {
zoom.out();
}
}
close() {
this.modalController.dismiss();
}
slideLoad(){
let modelslider = this.slider.nativeElement.swiper;
modelslider.slideTo(this.index); // doesn't work
}
}
文档中方法的屏幕截图:
模板:
<ion-content fullscreen>
<ion-slides [options]="sliderOpts" (ionSlidesDidLoad)="slideLoad()" (ionSlideDidChange)="slideChange()" #slider>
<ion-slide *ngFor="let img of images; let i = index">
<div class="swiper-zoom-container">
<img src="{{ img.url }}" />
</div>
</ion-slide>
</ion-slides>
<ion-toolbar fixed>
<div id="modal-button-wrap">
<ion-button (click)="close()" id="modal-close" class="clear">
<ion-icon name="close"></ion-icon>
</ion-button>
<ion-button (click)="delete()" id="modal-edit">
<ion-icon name="create"></ion-icon>
<ion-label> EDIT PHOTO</ion-label>
</ion-button>
<ion-button (click)="delete()" id="modal-delete" class="clear">
<ion-icon name="trash"></ion-icon>
</ion-button>
</div>
</ion-toolbar>
</ion-content>