图像不能在寻呼机点上滑动单击离子 5答案

【问题标题】：Image not slide on pager dots click ionic 5图像不能在寻呼机点上滑动单击离子 5
【发布时间】：2020-10-14 22:28:55
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： ionic-framework ionic4 ionic5

【解决方案1】：

默认情况下，它们是不可点击的，但正如您所见in the Ionic docs，您可以设置滑块的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
    }
  };
}

模板

<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>

请看一下这个stackblitz demo。

【讨论】：