图像无法在寻呼机点上滑动单击 ionic 5

Sun*_*ara 1 ionic-framework ionic4 ionic5

我正在使用 ionic v5 工作。我想在寻呼机点单击上滑动图像,但现在不起作用。

我的代码是:

 <ion-slides pager="true">
   <ion-slide>
     <p>Page1</p>
   </ion-slide>
   <ion-slide>
     <p>Page2</p>
   </ion-slide>
   <ion-slide>
     <p>Page3</p>
   </ion-slide>
 </ion-slides>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

seb*_*ras 5

默认情况下,它们不可点击,但是,正如您在 Ionic 文档中看到的,您可以设置options滑块的 来更改:

options:传递给 swiper 实例的选项。请参阅http://idangero.us/swiper/api/了解有效选项

成分

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage {
  public items = ["Option 1", "Option 2", "Option 3"];

  public sliderOptions = {
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
      clickable: true
    }
  };
}
Run Code Online (Sandbox Code Playgroud)

模板

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <h2>Welcome to Ionic!</h2>
  <p>
    Slider with clickable pager:
  </p>

  <ion-slides pager="true" [options]="sliderOptions">
    <ion-slide *ngFor="let item of items">
      <p>{{ item }}</p>
    </ion-slide>
  </ion-slides>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

请看一下这个stackblitz 演示

演示项目