Question

我用了离子4玻片。

 <ion-slides pager="false">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide (click)="next(slides, 5)">
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 4</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 5</h1>
      </ion-slide>
    </ion-slides>

在ts文件中，我使用了以下代码。

next(slide, index) {
this.slides.slideTo(index)
}

click事件运行良好。单击后，幻灯片停止。我从以下位置找到了此修复程序。

https://forum.ionicframework.com/t/jump-to-an-specific-slide-with-ion-slides-component/48840/5

我该如何解决此问题？

Answer 1

认为您缺少模板参考变量#slides

 <ion-slides pager="false" #slides >
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide (click)="next(slides , 4)">
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 4</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 5</h1>
      </ion-slide>
    </ion-slides>

和.ts

next(slide, index) {
    slide.slideTo(index)
}

第二路

cmd（项目中）-

npm i @ionic/angular

.html-

  <ion-slides pager="false">
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide (click)="next(4)">
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
     <ion-slide>
            <h1>Slide 4</h1>
          </ion-slide>
     <ion-slide>
            <h1>Slide 5</h1>
          </ion-slide>
        </ion-slides>

.ts-

import {IonSlides} from '@ionic/angular';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
      @ViewChild(IonSlides) slides: IonSlides;


next( index) {
    this.slides.slideTo(index)
}
}

单击离子幻灯片，转到一些幻灯片

1 个答案:

第二路