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)
默认情况下,它们不可点击,但是,正如您在 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 演示。
| 归档时间: |
|
| 查看次数: |
1543 次 |
| 最近记录: |