Ionic幻灯片组件 _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="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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="http://www.srcmini.com/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幻灯片组件】当你执行Ionic应用程序时, 它将提供你在滑块选项中设置的初始滑动页面。现在, 你可以从该页面滑动其他页面。