📌  相关文章
📜  ionic 幻灯片

📅  最后修改于: 2021-01-03 04:58:10             🧑  作者: Mango

ionic 滑梯

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

ionic 滑片：它是 ionic 滑片的子组件。您可以将模板写为 。幻灯片内容应写在此组件内部，该组件应与幻灯片一起使用。

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

例

Home.page.html

在此示例中，我们创建了四个滑块页面。这些滑块页面位于组件的子子内部。


  
    Slides
  



  

    
      
      
Welcome to the JavaTpoint

      
JavaTpoint offers Corporate Training, Summer Training, Online Training and Winter Training on Java, Android, Python, Oracle, PHP, and many more technologies.

    

    
      
      
What is Ionic?

      
Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.

    

    
      
      
What is Ionic Pro?

      
Ionic Pro 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.

    

    
      
      
Ready to Play?

      Continue

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属性来完成，该属性类似于以下语法。

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

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

Home.page.html


  
    Slides
  



  

    
      
      
Welcome to the JavaTpoint

      
JavaTpoint offers Corporate Training, Summer Training, Online Training and Winter Training on Java, Android, Python, Oracle, PHP, and many more technologies.

    

    
      
      
What is Ionic?

      
Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.

    

    
      
      
What is Ionic Pro?

      
Ionic Pro 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.

    

    
      
      
Ready to Play?

      Continue

主页

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应用程序时，它将提供您在滑块选项中设置的初始滑动页面。现在，您可以从该页面滑动其他页面。