ion-slides

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4轮播图组件ion-slides对项目进行布局。ion-slides中有ionic ion-slides 用法(Usage) ,ionic ion-slides 属性(Properties) ,ionic ion-slides 事件(Events) ,ionic ion-slides 内置方法(Methods) ,ionic ion-slides 中的CSS 自定义属性等

The Slides component is a multi-section container. Each section can be swiped or dragged between. It contains any number of Slide components.

Adopted from Swiper.js: The most modern mobile touch slider and framework with hardware accelerated transitions.

http://www.idangero.us/swiper/

Copyright 2016, Vladimir Kharlampidi The iDangero.us http://www.idangero.us/

Licensed under MIT

ion-slides 用法(Usage)

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

@Component({
  selector: 'slides-example',
  template: `
    
      
        

Slide 1

Slide 2

Slide 3

`
}) export class SlideExample { slideOpts = { effect: 'flip' }; constructor() {} }
  <ion-slides pager="true">

    <ion-slide>
      <h1>Slide 1h1>
    ion-slide>

    <ion-slide>
      <h1>Slide 2h1>
    ion-slide>

    <ion-slide>
      <h1>Slide 3h1>
    ion-slide>
  ion-slides>
var slides = document.querySelector('ion-slides');
slides.options = {
  effect: 'flip'
}

ion-slides 属性(Properties)

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

options

Description

Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options

Attribute options
Type any

pager

Description

If true, show the pagination.

Attribute pager
Type boolean

scrollbar

Description

If true, show the scrollbar.

Attribute scrollbar
Type boolean

ion-slides 事件(Events)

Name Description
ionSlideDidChange Emitted after the active slide has changed.
ionSlideDoubleTap Emitted when the user double taps on the slide's container.
ionSlideDrag Emitted when the slider is actively being moved.
ionSlideNextEnd Emitted when the next slide has ended.
ionSlideNextStart Emitted when the next slide has started.
ionSlidePrevEnd Emitted when the previous slide has ended.
ionSlidePrevStart Emitted when the previous slide has started.
ionSlideReachEnd Emitted when the slider is at the last slide.
ionSlideReachStart Emitted when the slider is at its initial position.
ionSlidesDidLoad Emitted after Swiper initialization
ionSlideTap Emitted when the user taps/clicks on the slide's container.
ionSlideTouchEnd Emitted when the user releases the touch.
ionSlideTouchStart Emitted when the user first touches the slider.
ionSlideTransitionEnd Emitted when the slide transition has ended.
ionSlideTransitionStart Emitted when the slide transition has started.
ionSlideWillChange Emitted before the active slide has changed.

ion-slides 内置方法(Methods)

getActiveIndex

Description

Get the index of the active slide.

Signature getActiveIndex() => Promise

getPreviousIndex

Description

Get the index of the previous slide.

Signature getPreviousIndex() => Promise

isBeginning

Description

Get whether or not the current slide is the first slide.

Signature isBeginning() => Promise

isEnd

Description

Get whether or not the current slide is the last slide.

Signature isEnd() => Promise

length

Description

Get the total number of slides.

Signature length() => Promise

lockSwipeToNext

Description

Lock or unlock the ability to slide to the next slides.

Signature lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise

lockSwipeToPrev

Description

Lock or unlock the ability to slide to the previous slides.

Signature lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise

lockSwipes

Description

Lock or unlock the ability to slide to change slides.

Signature lockSwipes(shouldLockSwipes: boolean) => Promise

slideNext

Description

Transition to the next slide.

Signature slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise

slidePrev

Description

Transition to the previous slide.

Signature slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise

slideTo

Description

Transition to the specified slide.

Signature slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise

startAutoplay

Description

Start auto play.

Signature startAutoplay() => Promise

stopAutoplay

Description

Stop auto play.

Signature stopAutoplay() => Promise

update

Description

Update the underlying slider implementation. Call this if you've added or removed child slides.

Signature update() => Promise

updateAutoHeight

Description

Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter

Signature updateAutoHeight(speed?: number | undefined) => Promise

ion-slides中的CSS 自定义属性

Name Description
--bullet-background Background of the pagination bullets
--bullet-background-active Background of the active pagination bullet