Ionic2 slides的使用

闻人哲茂
2023-12-01
<ion-slides pager>

  <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>

上面是一段非常简单的<ion-slides>的使用,很简单<ion-slides>里面嵌套n个<ion-slide>.


假设我们在一个@Component中已经添加下面的模板:

<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
</ion-slides>

之后你可以在某个页面的class中使用@ViewChild()去分配Slides到该函数的slides属性中。现在我们就可以调用Slides中任何方法了。比如我们可以使用slideTo()方法导航到一个定义好的button按钮。之后我们调用goToSlide()方法和导航到第三个滑动页。

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
//引入Slides模块
class MyPage {
  @ViewChild(Slides) slides: Slides;
  //在目标子页面中注入Slides模块
  goToSlide() { //滑动方法,
    this.slides.slideTo(2, 500);//第三个,500毫秒。
  }
}

我们也可以增加事件到<ion-sliders>元素上,比如我们现在添加一个ionSlideDidChange事件。
<ion-slides (ionSlideDidChange)="slideChanged()">

后面我们来定义slideChanged()这个触发函数:

 slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    console.log("Current index is", currentIndex);
  }

<ion-slides>标签的附件属性

autoplay 值是number,自动播放功能,默认值是null,也不自动翻页,如果赋值的话,就会自动播放,以毫秒为单位,不循环。

control 值是slides 传入一个或者一组Slide实例化对象,通过当前slide来控制这些slides.

dir 值是字符串形式 如果dir属性值等于rtlinteral_rtl等于ture;

direction 默认值是"horizontal",还可以设置成“vertical";

effect 用于设置动画效果,默认值是”slide”,其他值有:slide, fade, cube, coverflow, flip;

initialSlide 设置slide初始索引值,默认值是0;

loop 默认false,设置成true,就会无限循环。

pager 默认false,设置成true,底部就会有小点点。

paginationType 楼上pager的样式,默认值为‘bullets’‘fraction’, ‘progress’

parallax 如果设置为true,开发者可以在slider里面使用parallaxed元素;

slidesPerView 默认值是1

spaceBetween 每个slide之间的距离 默认值0;

speed 滑动用时,默认值300;

zoom 默认false,如果设置为true,

 类似资料: