mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 10:41:13 +08:00

committed by
mhartington

parent
ad006dd1ee
commit
fc0d4c0776
@ -623,8 +623,11 @@ export class Slide {
|
||||
}
|
||||
|
||||
export declare interface Slides extends StencilComponents.IonSlides {}
|
||||
@Directive({selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']})
|
||||
@Directive({selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']})
|
||||
export class Slides {
|
||||
ionSlidesDidLoad: EventEmitter<any>;
|
||||
ionSlideTap: EventEmitter<any>;
|
||||
ionSlideDoubleTap: EventEmitter<any>;
|
||||
ionSlideWillChange: EventEmitter<any>;
|
||||
ionSlideDidChange: EventEmitter<any>;
|
||||
ionSlideNextStart: EventEmitter<any>;
|
||||
@ -641,7 +644,7 @@ export class Slides {
|
||||
constructor(r: ElementRef) {
|
||||
proxyMethods(this, r, ['update', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']);
|
||||
proxyInputs(this, r, ['options', 'pager', 'scrollbar']);
|
||||
proxyOutputs(this, ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
|
||||
proxyOutputs(this, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
|
||||
}
|
||||
}
|
||||
|
||||
|
12
core/src/components.d.ts
vendored
12
core/src/components.d.ts
vendored
@ -6803,6 +6803,10 @@ declare global {
|
||||
* Emitted after the active slide has changed.
|
||||
*/
|
||||
'onIonSlideDidChange'?: (event: CustomEvent) => void;
|
||||
/**
|
||||
* Emitted when the user double taps on the slide's container.
|
||||
*/
|
||||
'onIonSlideDoubleTap'?: (event: CustomEvent) => void;
|
||||
/**
|
||||
* Emitted when the slider is actively being moved.
|
||||
*/
|
||||
@ -6831,6 +6835,10 @@ declare global {
|
||||
* Emitted when the slider is at its initial position.
|
||||
*/
|
||||
'onIonSlideReachStart'?: (event: CustomEvent) => void;
|
||||
/**
|
||||
* Emitted when the user taps/clicks on the slide's container.
|
||||
*/
|
||||
'onIonSlideTap'?: (event: CustomEvent) => void;
|
||||
/**
|
||||
* Emitted when the user releases the touch.
|
||||
*/
|
||||
@ -6851,6 +6859,10 @@ declare global {
|
||||
* Emitted before the active slide has changed.
|
||||
*/
|
||||
'onIonSlideWillChange'?: (event: CustomEvent) => void;
|
||||
/**
|
||||
* Emitted after Swiper initialization
|
||||
*/
|
||||
'onIonSlidesDidLoad'?: (event: CustomEvent) => void;
|
||||
/**
|
||||
* Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options
|
||||
*/
|
||||
|
@ -74,6 +74,11 @@ If true, show the scrollbar. Defaults to `false`.
|
||||
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.
|
||||
@ -109,6 +114,11 @@ Emitted when the slider is at the last slide.
|
||||
Emitted when the slider is at its initial position.
|
||||
|
||||
|
||||
#### ionSlideTap
|
||||
|
||||
Emitted when the user taps/clicks on the slide's container.
|
||||
|
||||
|
||||
#### ionSlideTouchEnd
|
||||
|
||||
Emitted when the user releases the touch.
|
||||
@ -134,6 +144,11 @@ Emitted when the slide transition has started.
|
||||
Emitted before the active slide has changed.
|
||||
|
||||
|
||||
#### ionSlidesDidLoad
|
||||
|
||||
Emitted after Swiper initialization
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### getActiveIndex()
|
||||
|
@ -22,6 +22,21 @@ export class Slides {
|
||||
|
||||
@Element() el!: HTMLStencilElement;
|
||||
|
||||
/**
|
||||
* Emitted after Swiper initialization
|
||||
*/
|
||||
@Event() ionSlidesDidLoad!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the user taps/clicks on the slide's container.
|
||||
*/
|
||||
@Event() ionSlideTap!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the user double taps on the slide's container.
|
||||
*/
|
||||
@Event() ionSlideDoubleTap!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted before the active slide has changed.
|
||||
*/
|
||||
@ -262,7 +277,7 @@ export class Slides {
|
||||
},
|
||||
parallax: false,
|
||||
scrollbar: {
|
||||
el: '.swiper-scrollbar',
|
||||
el: this.scrollbar ? '.swiper-scrollbar' : null,
|
||||
hide: true,
|
||||
},
|
||||
slidesPerView: 1,
|
||||
@ -348,19 +363,28 @@ export class Slides {
|
||||
// Keep the event options separate, we dont want users
|
||||
// overwriting these
|
||||
const eventOptions = {
|
||||
onSlideChangeStart: this.ionSlideWillChange.emit,
|
||||
onSlideChangeEnd: this.ionSlideDidChange.emit,
|
||||
onSlideNextStart: this.ionSlideNextStart.emit,
|
||||
onSlidePrevStart: this.ionSlidePrevStart.emit,
|
||||
onSlideNextEnd: this.ionSlideNextEnd.emit,
|
||||
onSlidePrevEnd: this.ionSlidePrevEnd.emit,
|
||||
onTransitionStart: this.ionSlideTransitionStart.emit,
|
||||
onTransitionEnd: this.ionSlideTransitionEnd.emit,
|
||||
onSliderMove: this.ionSlideDrag.emit,
|
||||
onReachBeginning: this.ionSlideReachStart.emit,
|
||||
onReachEnd: this.ionSlideReachEnd.emit,
|
||||
onTouchStart: this.ionSlideTouchStart.emit,
|
||||
onTouchEnd: this.ionSlideTouchEnd.emit
|
||||
on: {
|
||||
init: () => {
|
||||
setTimeout(() => {
|
||||
this.ionSlidesDidLoad.emit();
|
||||
}, 20);
|
||||
},
|
||||
slideChangeTransitionStart: this.ionSlideWillChange.emit,
|
||||
slideChangeTransitionEnd: this.ionSlideDidChange.emit,
|
||||
slideNextTransitionStart: this.ionSlideNextStart.emit,
|
||||
slidePrevTransitionStart: this.ionSlidePrevStart.emit,
|
||||
slideNextTransitionEnd: this.ionSlideNextEnd.emit,
|
||||
slidePrevTransitionEnd: this.ionSlidePrevEnd.emit,
|
||||
transitionStart: this.ionSlideTransitionStart.emit,
|
||||
transitionEnd: this.ionSlideTransitionEnd.emit,
|
||||
sliderMove: this.ionSlideDrag.emit,
|
||||
reachBeginning: this.ionSlideReachStart.emit,
|
||||
reachEnd: this.ionSlideReachEnd.emit,
|
||||
touchStart: this.ionSlideTouchStart.emit,
|
||||
touchEnd: this.ionSlideTouchEnd.emit,
|
||||
tap: this.ionSlideTap.emit,
|
||||
doubleTap: this.ionSlideDoubleTap.emit
|
||||
}
|
||||
};
|
||||
|
||||
// Merge the base, user options, and events together then pas to swiper
|
||||
|
@ -142,6 +142,15 @@
|
||||
slides.addEventListener('ionSlideTouchEnd', function (e) {
|
||||
console.log('slide touch end', e)
|
||||
});
|
||||
slides.addEventListener('ionSlidesDidLoad', function (e) {
|
||||
console.log('slides did load', e)
|
||||
});
|
||||
slides.addEventListener('ionSlideTap', function (e) {
|
||||
console.log('slide tapped', e)
|
||||
});
|
||||
slides.addEventListener('ionSlideDoubleTap', function (e) {
|
||||
console.log('slide double-tapped', e)
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
Reference in New Issue
Block a user