Ionic幻灯片组件

幻灯片组件包含的页面可以通过滑动或拖动内容屏幕进行更改。这是一个多部分的容器。它可以包含任意数量的Slide组件。在创建画廊, 教程和基于页面的布局时, 它非常有用。

Ionic滑片：它是Ionic滑片的子组件。你可以将模板写为<ion-slide>。幻灯片内容应写在此组件内部, 该组件应与幻灯片一起使用。

以下示例说明了如何在Ionic应用程序中使用幻灯片组件。

例

Home.page.html

在此示例中, 我们创建了四个滑块页面。这些滑块页面放置在<ion-slides>组件的子子<ion-slide>内部。

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Slides</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen class="ion-padding" scroll-y="false" color="success">
  <ion-slides>

    <ion-slide>
      <img src="assets/jtp_logo.png"/>
      <h2>Welcome to the <b>srcmini</b></h2>
      <p>srcmini offers Corporate Training, Summer Training, Online Training and Winter Training on Java, Android, Python, Oracle, PHP, and many more technologies.</p>
    </ion-slide>

    <ion-slide>
      <img src="assets/ionic_logo1.png"/>
      <h2>What is Ionic?</h2>
      <p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
    </ion-slide>

    <ion-slide>
      <img src="assets/Ionic_logo2.png"/>
      <h2>What is Ionic Pro?</h2>
      <p><b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
    </ion-slide>

    <ion-slide>
      <img src="assets/Ionic_logo3.png"/>
      <h2>Ready to Play?</h2>
      <ion-button fill="clear">Continue <ion-icon slot="end" name="arrow-forward"></ion-icon></ion-button>
    </ion-slide>

  </ion-slides>
</ion-content>

Home.page.scss

此页面包含你在应用程序中使用的元素的样式。

:root {
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 22px;
}
.swiper-slide {
  display: block;
}
ion-slide > h2 {
  margin-top: 2.8rem;
}
ion-slide > img {
  max-height: 50%;
  max-width: 60%;
  margin: 36px 0;
}

输出：

当你执行以上代码片段时, 将提供以下输出。

接下来, 如果你滑动或拖动页面, 它将显示下一页, 如下图所示。你可以对所有滑动页面执行此操作。

自定义动画

默认情况下, Ionic Slides组件使用内置的幻灯片动画效果。但是, 你也可以为幻灯片组件使用自定义动画。可以通过使用options属性来完成, 该属性类似于下面的语法。

<ion-slides pager="true" [options]="slideOpts">

你可以从此处找到不同的滑块参数选项。

下面的示例说明如何将自定义动画效果与Slides组件一起使用。

Home.page.html

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Slides</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen class="ion-padding" scroll-y="false" color="success">
  <ion-slides pager="true" [options]="slideOpts">

    <ion-slide>
      <img src="assets/jtp_logo.png"/>
      <h2>Welcome to the <b>srcmini</b></h2>
      <p>srcmini offers Corporate Training, Summer Training, Online Training and Winter Training on Java, Android, Python, Oracle, PHP, and many more technologies.</p>
    </ion-slide>

    <ion-slide>
      <img src="assets/ionic_logo1.png"/>
      <h2>What is Ionic?</h2>
      <p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
    </ion-slide>

    <ion-slide>
      <img src="assets/Ionic_logo2.png"/>
      <h2>What is Ionic Pro?</h2>
      <p><b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
    </ion-slide>

    <ion-slide>
      <img src="assets/Ionic_logo3.png"/>
      <h2>Ready to Play?</h2>
      <ion-button fill="clear">Continue <ion-icon slot="end" name="arrow-forward"></ion-icon></ion-button>
    </ion-slide>

  </ion-slides>
</ion-content>

Home.page.ts

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

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  slideOpts = {
    initialSlide: 1, speed: 300, effect: 'flip', };
  constructor() {}
}

输出：

当你执行Ionic应用程序时, 它将提供你在滑块选项中设置的初始滑动页面。现在, 你可以从该页面滑动其他页面。