如何告诉 ion-slides 要显示什么幻灯片 (slideTo)答案

【问题标题】：How to tell ion-slides what slide to show (slideTo)如何告诉 ion-slides 要显示什么幻灯片 (slideTo)
【发布时间】：2019-12-29 17:56:13
【问题描述】：

我有一个包含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>

【问题讨论】：

你在哪里调用这个方法：slideLoad()？
模板长什么样？
刚刚添加了模板。 slideLoad() 方法在 ionSlidesDidLoad 上调用
刚刚尝试了您的代码，它只适用于 sliderOpts，请在堆栈闪电战中重现该问题。
我正在尝试，但它给了我一个“找不到包 core-js”的错误，即使该包已明确安装在 stackblitz 的依赖项中...stackblitz.com/edit/ionic-r4kxkv

标签： javascript angular ionic-framework swiper ion-slides

【解决方案1】：

在模板中

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

在组件中

import { IonSlides } from '@ionic/angular';
--
@ViewChild('slides', {static: true}) slides: IonSlides;
--  
this.slides.slideTo(your_slidenumber);

【讨论】：

它的工作，但当 cahnge 静态到：{static: false}
如何在反应中做到这一点？
仍在使用 Ionic 5。如果您像我一样只想转到下一张幻灯片，也可以使用 this.slides.slideNext()。

【解决方案2】：

由于您在模态中使用离子幻灯片并且模态被实例化和销毁，根据您的情况，您可能需要考虑仅使用“initialSlide”参数而不是 slideTo 方法：

slideOpts = {
    initialSlide: 2,
    speed: 400
};

slideTo 是一种方法，本质上在您的模态内部的情况下，幻灯片组件使用默认的 initialSlide 进行初始化（因为您没有使用此属性），然后它必须导航到特定的幻灯片。通过使用 initialSlide，您只需将幻灯片组件精确地初始化到您需要的位置。

【讨论】：

【解决方案3】：

我和你一样对ionic 4 docs 中的slideTo 方法感到困惑。

我找到了用法。我只是根据您的代码描述了用法：

模板

<ion-slides #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>

TS 文件

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

@ViewChild('slider', { read: IonSlides }) slider: IonSlides;

...

// You can use slideTo method here with your slide index (number), the slide index must be a number
this.slider.slideTo(slideIndex);

【讨论】：