javascript - 如何告诉 ionic 载玻片显示哪个载玻片(slideTo)

我有一个包含ion-slides元素的模式。在主页中，我有图像的缩略图，这些图像在(click)上使用滑块打开模式。我需要选择带有缩略图索引的滑块slideTo幻灯片，并且尚未使它工作。

我已经完成了将正确的索引传递给模式并验证将其记录到控制台。在ionic 4 docs中，我们定向到swiper docs，在那里可以看到slideTo方法，但是当离子型滑块初始化时，我只是不知道如何使用它。我遵循了tutorial来获取模态和滑块，除了打开右侧滑块上的滑块之外，其他所有东西都很好用。我已经尝试了多种方法来遵循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>&nbsp;&nbsp;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>

最佳答案

在模板中

<ion-slides #slides>
-----
</ion-slides>

在组件中

import { IonSlides } from '@ionic/angular';

@ViewChild('slides', {static: true}) slides: IonSlides;

this.slides.slideTo(your slidenumber);

关于javascript - 如何告诉 ionic 载玻片显示哪个载玻片(slideTo)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57642699/