Ionic 滑块

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

Ion-slide: 它是 Ionic 幻灯片的子组件。您可以将模板编写为 <ion-slide>。 幻灯片内容应该写在这个组件中，该组件应该与幻灯片一起使用。

以下示例说明了如何将幻灯片组件与 Ionic 应用程序一起使用。

示例

Home.page.html

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

Home.page.scss

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

输出

当您执行上面的代码片段时，它将给出以下输出。

接下来，如果您滑动或拖动页面，它将给出下一页，如下面的图像所示。您可以对所有滑动页面执行此操作。

自定义动画

默认情况下，Ionic 幻灯片组件使用内置的幻灯片动画效果。但是，您也可以为幻灯片组件使用自定义动画。可以通过使用 options 属性来完成，该属性如下所示的语法。

您可以从这里找到不同的滑块参数选项。

以下示例说明了如何将自定义动画效果与幻灯片组件一起使用。

Home.page.html

Home.page.ts

输出

当您执行 Ionic 应用程序时，它将给出您在滑块选项中设置的初始滑动页面。现在，您可以从此页面滑动其他页面。