javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(slides): update swiper instance after initialization (#24257)

Browse Source
This commit is contained in:
Sean Perkins
2021-11-24 11:52:48 -05:00
committed by GitHub
parent fb96ab5a26
commit 89e4bc56a1
1 changed files with 4 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
core/src/components/slides/slides.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core'; import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { componentOnReady } from '../../utils/helpers' import { componentOnReady } from '../../utils/helpers'
@ -24,8 +24,6 @@ export class Slides implements ComponentInterface {
private mutationO?: MutationObserver; private mutationO?: MutationObserver;
private readySwiper!: (swiper: SwiperInterface) => void; private readySwiper!: (swiper: SwiperInterface) => void;
private swiper: Promise<SwiperInterface> = new Promise(resolve => { this.readySwiper = resolve; }); private swiper: Promise<SwiperInterface> = new Promise(resolve => { this.readySwiper = resolve; });
private syncSwiper?: SwiperInterface;
private didInit = false;
@Element() el!: HTMLIonSlidesElement; @Element() el!: HTMLIonSlidesElement;
@ -141,8 +139,7 @@ export class Slides implements ComponentInterface {
} }
connectedCallback() { connectedCallback() {
// tslint:disable-next-line: strict-type-predicates if (Build.isBrowser) {
if (typeof MutationObserver !== 'undefined') {
const mut = this.mutationO = new MutationObserver(() => { const mut = this.mutationO = new MutationObserver(() => {
if (this.swiperReady) { if (this.swiperReady) {
this.update(); this.update();
@ -154,10 +151,7 @@ export class Slides implements ComponentInterface {
}); });
componentOnReady(this.el, () => { componentOnReady(this.el, () => {
if (!this.didInit) {
this.didInit = true;
this.initSwiper(); this.initSwiper();
}
}) })
} }
} }
@ -167,23 +161,6 @@ export class Slides implements ComponentInterface {
this.mutationO.disconnect(); this.mutationO.disconnect();
this.mutationO = undefined; this.mutationO = undefined;
} }
/**
* We need to synchronously destroy
* swiper otherwise it is possible
* that it will be left in a
* destroyed state if connectedCallback
* is called multiple times
*/
const swiper = this.syncSwiper;
if (swiper !== undefined) {
swiper.destroy(true, true);
this.swiper = new Promise(resolve => { this.readySwiper = resolve; });
this.swiperReady = false;
this.syncSwiper = undefined;
}
this.didInit = false;
} }
/** /**
@ -369,7 +346,6 @@ export class Slides implements ComponentInterface {
await waitForSlides(this.el); await waitForSlides(this.el);
const swiper = new Swiper(this.el, finalOptions); const swiper = new Swiper(this.el, finalOptions);
this.swiperReady = true; this.swiperReady = true;
this.syncSwiper = swiper;
this.readySwiper(swiper); this.readySwiper(swiper);
} }
@ -483,6 +459,8 @@ export class Slides implements ComponentInterface {
init: () => { init: () => {
setTimeout(() => { setTimeout(() => {
this.ionSlidesDidLoad.emit(); this.ionSlidesDidLoad.emit();
// Forces the swiper instance to update after initializing.
this.update();
}, 20); }, 20);
}, },
slideChangeTransitionStart: this.ionSlideWillChange.emit, slideChangeTransitionStart: this.ionSlideWillChange.emit,