@tarojs/components 4.0.4 → 4.0.5-alpha.10

package/dist/collection/components/swiper/swiper.js

@@ -14,56 +14,58 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _Swiper_id, _Swiper_source;
+var _Swiper_id, _Swiper_source, _Swiper_swiperResetting, _Swiper_domChangeByOutSide, _Swiper_lastSwiperActiveIndex;
 import { h, Host } from '@stencil/core';
-import classNames from 'classnames';
-import SwiperJS from 'swiper/swiper-bundle.esm.js';
+import SwiperJS from 'swiper/bundle';
 import { debounce } from '../../utils';
 let INSTANCE_ID = 0;
+const ONE_ADDITIONAL_SLIDES_THRESHOLD = 5;
+const TWO_ADDITIONAL_SLIDES_THRESHOLD = 7;
 export class Swiper {
   constructor() {
     _Swiper_id.set(this, INSTANCE_ID++);
     _Swiper_source.set(this, '');
-    this.handleSwiperLoopListen = () => {
-      var _a, _b, _c;
-      ((_a = this.observerFirst) === null || _a === void 0 ? void 0 : _a.disconnect) && this.observerFirst.disconnect();
-      ((_b = this.observerLast) === null || _b === void 0 ? void 0 : _b.disconnect) && this.observerLast.disconnect();
-      this.observerFirst = new MutationObserver(this.handleSwiperLoopDebounce);
-      this.observerLast = new MutationObserver(this.handleSwiperLoopDebounce);
-      const wrapper = (_c = this.swiper.$wrapperEl) === null || _c === void 0 ? void 0 : _c[0];
-      const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)');
-      if (list.length >= 1) {
-        this.observerFirst.observe(list[0], {
-          characterData: true
-        });
-      }
-      else if (list.length >= 2) {
-        this.observerLast.observe(list[list.length - 1], {
-          characterData: true
-        });
-      }
-    };
-    this.handleSwiperLoop = () => {
-      var _a, _b, _c, _d;
-      if (!this.swiper || !this.circular)
+    _Swiper_swiperResetting.set(this, false
+    // dom 变化是否由外部引起，因为 swiper 的循环模式也会引起 dom 的变化。如果不是由外部引起的 dom 变化，就不需要重新初始化 swiper
+    );
+    // dom 变化是否由外部引起，因为 swiper 的循环模式也会引起 dom 的变化。如果不是由外部引起的 dom 变化，就不需要重新初始化 swiper
+    _Swiper_domChangeByOutSide.set(this, false);
+    _Swiper_lastSwiperActiveIndex.set(this, 0);
+    this.handleSwiperSizeDebounce = debounce(() => {
+      if (!this.swiper || !this.isWillLoadCalled)
         return;
-      const swiper = this.swiper; // Note: loop 相关的方法 swiper 未声明
-      const duplicates = ((_a = this.swiperWrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.swiper-slide-duplicate')) || [];
-      if (duplicates.length < 2) {
-        // Note: 循环模式下，但是前后垫片未注入
-        (_b = swiper.loopDestroy) === null || _b === void 0 ? void 0 : _b.call(swiper);
-        (_c = swiper.loopCreate) === null || _c === void 0 ? void 0 : _c.call(swiper);
+      if (this.circular) {
+        if (__classPrivateFieldGet(this, _Swiper_domChangeByOutSide, "f")) {
+          this.reset();
+          __classPrivateFieldSet(this, _Swiper_domChangeByOutSide, false, "f");
+          __classPrivateFieldSet(this, _Swiper_swiperResetting, false, "f");
+        }
       }
       else {
-        (_d = swiper.loopFix) === null || _d === void 0 ? void 0 : _d.call(swiper);
-      }
-    };
-    this.handleSwiperLoopDebounce = debounce(this.handleSwiperLoop, 50);
-    this.handleSwiperSizeDebounce = debounce(() => {
-      if (this.swiper && this.swiper.$wrapperEl && !this.circular) {
-        this.swiper.updateSlides();
+        this.swiper.update();
+        __classPrivateFieldSet(this, _Swiper_swiperResetting, false, "f");
       }
     }, 50);
+    this.reset = () => {
+      __classPrivateFieldSet(this, _Swiper_swiperResetting, true, "f");
+      __classPrivateFieldSet(this, _Swiper_lastSwiperActiveIndex, this.swiper.realIndex, "f");
+      this.swiper.destroy();
+      this.handleInit(true);
+      __classPrivateFieldSet(this, _Swiper_swiperResetting, false, "f");
+    };
+    // 下面为方法函数
+    this.getSlidersList = () => this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)') || [];
+    // 获取是否需要手动修复 loop 的条件
+    this.getNeedFixLoop = () => {
+      const margins = this.parseMargin();
+      const hasMargin = margins.filter(Boolean).length > 0;
+      return this.circular && hasMargin;
+    };
+    this.parseMargin = () => {
+      const [, previousMargin] = /^(\d+)px/.exec(this.previousMargin) || [];
+      const [, nextMargin] = /^(\d+)px/.exec(this.nextMargin) || [];
+      return [parseInt(previousMargin) || 0, parseInt(nextMargin) || 0];
+    };
     this.swiperWrapper = undefined;
     this.swiper = undefined;
     this.isWillLoadCalled = false;
@@ -82,39 +84,50 @@ export class Swiper {
     this.displayMultipleItems = 1;
     this.full = false;
     this.zoom = false;
+    this.effectsProps = {};
     this.observer = undefined;
-    this.observerFirst = undefined;
-    this.observerLast = undefined;
   }
   watchCurrent(newVal) {
-    if (this.currentItemId || !this.isWillLoadCalled)
+    if (this.currentItemId || !this.isWillLoadCalled || !this.swiper)
       return;
     const n = parseInt(newVal, 10);
-    if (isNaN(n))
+    if (isNaN(n) || n === this.swiper.realIndex)
       return;
+    __classPrivateFieldSet(this, _Swiper_source, '', "f");
     if (this.circular) {
-      if (!this.swiper.isBeginning && !this.swiper.isEnd) {
-        this.swiper.slideToLoop(n); // 更新下标
-      }
+      this.swiper.slideToLoop(n); // 更新下标
+      this.autoplay && this.swiper.autoplay.pause();
+      // @ts-ignore
+      this.swiper.loopFix();
+      this.autoplay && this.swiper.autoplay.start();
     }
     else {
       this.swiper.slideTo(n); // 更新下标
     }
   }
   watchCurrentItemId(newVal) {
-    var _a;
-    const wrapper = (_a = this.swiper.$wrapperEl) === null || _a === void 0 ? void 0 : _a[0];
+    if (!this.swiperWrapper || !this.isWillLoadCalled)
+      return;
     let itemIdIndex = 0;
-    wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
-      // @ts-ignore
-      if (swiperItem.itemId && swiperItem.itemId === newVal) {
-        itemIdIndex = index;
+    this.getSlidersList().forEach((swiperItem, index) => {
+      const itemId = swiperItem.getAttribute('item-id');
+      if (itemId === newVal) {
+        if (this.circular) {
+          itemIdIndex = Number(swiperItem.getAttribute('data-swiper-slide-index'));
+        }
+        else {
+          itemIdIndex = index;
+        }
       }
     });
+    if (itemIdIndex === this.swiper.realIndex)
+      return; // 无需更新
+    __classPrivateFieldSet(this, _Swiper_source, '', "f");
     if (this.circular) {
-      if (!this.swiper.isBeginning && !this.swiper.isEnd) {
-        this.swiper.slideToLoop(itemIdIndex); // 更新下标
-      }
+      this.swiper.slideToLoop(itemIdIndex); // 更新下标
+      // @ts-ignore
+      this.swiper.loopFix();
+      this.autoplay && this.swiper.autoplay.start();
     }
     else {
       this.swiper.slideTo(itemIdIndex); // 更新下标
@@ -142,165 +155,156 @@ export class Swiper {
     }
   }
   watchDuration(newVal) {
-    if (!this.isWillLoadCalled)
+    if (!this.swiper || !this.isWillLoadCalled)
       return;
     this.swiper.params.speed = newVal;
   }
   watchInterval(newVal) {
-    if (!this.isWillLoadCalled)
+    if (!this.swiper || !this.isWillLoadCalled)
       return;
     if (typeof this.swiper.params.autoplay === 'object') {
       this.swiper.params.autoplay.delay = newVal;
     }
   }
   watchSwiperWrapper(newVal) {
-    if (!this.isWillLoadCalled)
+    if (!this.isWillLoadCalled || !this.swiper)
       return;
     if (!newVal)
       return;
+    const beforeDomOperation = () => {
+      __classPrivateFieldSet(this, _Swiper_domChangeByOutSide, true, "f");
+      // 如果是由于外部子节点的变化引起的 dom 变化，需要重新初始化 swiper。
+      // 在初dom操作之前，需要调用 loopDestroy，把子节点的顺序恢复
+      this.swiper.loopDestroy();
+      this.swiper.params.loop = false;
+    };
     this.el.appendChild = (newChild) => {
+      __classPrivateFieldSet(this, _Swiper_swiperResetting, true, "f");
+      if (!__classPrivateFieldGet(this, _Swiper_domChangeByOutSide, "f") && this.circular) {
+        beforeDomOperation();
+      }
       return newVal.appendChild(newChild);
     };
     this.el.insertBefore = (newChild, refChild) => {
+      __classPrivateFieldSet(this, _Swiper_swiperResetting, true, "f");
+      if (!__classPrivateFieldGet(this, _Swiper_domChangeByOutSide, "f") && this.circular) {
+        beforeDomOperation();
+      }
       return newVal.insertBefore(newChild, refChild);
     };
     this.el.replaceChild = (newChild, oldChild) => {
+      __classPrivateFieldSet(this, _Swiper_swiperResetting, true, "f");
+      if (!__classPrivateFieldGet(this, _Swiper_domChangeByOutSide, "f") && this.circular) {
+        beforeDomOperation();
+      }
       return newVal.replaceChild(newChild, oldChild);
     };
     this.el.removeChild = (oldChild) => {
+      __classPrivateFieldSet(this, _Swiper_swiperResetting, true, "f");
+      if (!__classPrivateFieldGet(this, _Swiper_domChangeByOutSide, "f") && this.circular) {
+        beforeDomOperation();
+      }
       return newVal.removeChild(oldChild);
     };
-    this.el.addEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce);
-    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce);
-    this.el.addEventListener('MutationObserver', this.handleSwiperSizeDebounce);
   }
   watchCircular() {
-    if (this.swiper) {
-      this.swiper.destroy();
-      this.handleInit();
-    }
+    if (!this.swiper || !this.isWillLoadCalled)
+      return;
+    this.reset();
   }
   watchDisplayMultipleItems() {
-    if (this.swiper) {
-      this.swiper.destroy();
-      this.handleInit();
-    }
+    if (!this.swiper || !this.isWillLoadCalled)
+      return;
+    this.reset();
   }
   componentWillLoad() {
     this.isWillLoadCalled = true;
   }
   componentDidLoad() {
-    var _a;
     this.handleInit();
-    if (!this.swiper || !this.circular)
+    if (!this.swiper || !this.swiperWrapper)
       return;
-    const wrapper = (_a = this.swiper.$wrapperEl) === null || _a === void 0 ? void 0 : _a[0];
-    this.observer = new MutationObserver(this.handleSwiperLoopListen);
-    this.observer.observe(wrapper, {
+    this.observer = new MutationObserver(this.handleSwiperSizeDebounce);
+    this.observer.observe(this.swiperWrapper, {
       childList: true
     });
   }
-  componentWillUpdate() {
-    var _a, _b;
-    if (!this.swiper)
-      return;
-    if (this.autoplay && !((_a = this.swiper.autoplay) === null || _a === void 0 ? void 0 : _a.running)) {
-      (_b = this.swiper.autoplay) === null || _b === void 0 ? void 0 : _b.start();
-    }
-    if (this.swiper.$el) {
-      this.swiper.update(); // 更新子元素
-    }
-  }
-  componentDidRender() {
-    this.handleSwiperLoop();
-  }
   disconnectedCallback() {
-    var _a, _b, _c, _d, _e, _f;
-    this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce);
-    this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce);
-    this.el.removeEventListener('MutationObserver', this.handleSwiperSizeDebounce);
-    (_b = (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
-    (_d = (_c = this.observerFirst) === null || _c === void 0 ? void 0 : _c.disconnect) === null || _d === void 0 ? void 0 : _d.call(_c);
-    (_f = (_e = this.observerLast) === null || _e === void 0 ? void 0 : _e.disconnect) === null || _f === void 0 ? void 0 : _f.call(_e);
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
-  handleInit() {
-    const { autoplay, circular, current, currentItemId, displayMultipleItems, duration, interval, vertical } = this;
-    let initialSlide = circular ? current + 1 : current;
-    if (currentItemId) {
-      let itemIdIndex = 0;
-      this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
-        // @ts-ignore
-        if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
-          itemIdIndex = index;
-        }
-      });
-      initialSlide = circular ? itemIdIndex + 1 : itemIdIndex;
+  handleInit(reset = false) {
+    const { autoplay, circular, current, currentItemId, displayMultipleItems, duration, interval, effectsProps, vertical } = this;
+    let initialSlide = current;
+    if (reset) {
+      initialSlide = __classPrivateFieldGet(this, _Swiper_lastSwiperActiveIndex, "f");
     }
+    else {
+      if (currentItemId) {
+        let itemIdIndex = 0;
+        this.getSlidersList().forEach((swiperItem, index) => {
+          // @ts-ignore
+          if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
+            itemIdIndex = index;
+          }
+        });
+        initialSlide = itemIdIndex;
+      }
+    }
+    const loopAdditionalSlides = this.getLoopAdditionalSlides();
+    const centeredSlides = displayMultipleItems === 1;
+    const slidesPerView = displayMultipleItems === 1 ? 'auto' : displayMultipleItems;
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
-    const options = {
-      pagination: { el: `.taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination` },
-      direction: vertical ? 'vertical' : 'horizontal',
-      loop: circular,
-      slidesPerView: displayMultipleItems,
-      initialSlide: initialSlide,
-      speed: duration,
-      observer: true,
-      observeParents: true,
-      zoom: this.zoom,
-      on: {
-        slideTo() {
-          that.current = this.realIndex;
-        },
-        // Note: slideChange 事件在 swiper.slideTo 改写 current 时不触发，因此用 slideChangeTransitionEnd 事件代替
-        slideChangeTransitionEnd() {
-          /** Note: 此处不能使用 slideChangeTransitionStart 事件
-           * - 因为在它触发时 swiper 各个参数并未准备好，将会导致错误的事件抛出；
-           * - 同时抛出 change 事件会导致 current 监听被打乱 swiper 的生命周期；
-           * - 模式与 slideTo 结合时，会导致动画会被中断、slider 展示不完整或衔接模式错误等问题。
-           */
-          if (circular) {
-            if (this.isBeginning || this.isEnd) {
-              this.slideToLoop(this.realIndex, 0); // 更新下标
-              return;
-            }
-          }
-          that.onChange.emit({
+    const options = Object.assign(Object.assign({ pagination: { el: `.taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination` }, direction: vertical ? 'vertical' : 'horizontal', loop: circular, slidesPerView: slidesPerView, initialSlide: initialSlide, loopAdditionalSlides: loopAdditionalSlides, speed: duration, observeParents: true, observer: true, centeredSlides: centeredSlides, zoom: this.zoom }, effectsProps), { on: {
+        changeTransitionEnd(e) {
+          if (__classPrivateFieldGet(that, _Swiper_swiperResetting, "f") || __classPrivateFieldGet(that, _Swiper_lastSwiperActiveIndex, "f") === this.realIndex)
+            return;
+          __classPrivateFieldSet(that, _Swiper_lastSwiperActiveIndex, this.realIndex, "f");
+          that.getNeedFixLoop() && e.loopFix();
+          that.autoplay && e.autoplay.start();
+          const currentItemId = that.getCurrentItemId(e);
+          that.onAnimationFinish.emit({
             current: this.realIndex,
             source: __classPrivateFieldGet(that, _Swiper_source, "f"),
+            currentItemId,
           });
+          __classPrivateFieldSet(that, _Swiper_source, 'autoplay', "f");
         },
-        touchEnd: () => {
+        touchMove() {
           __classPrivateFieldSet(that, _Swiper_source, 'touch', "f");
         },
-        autoplay() {
-          __classPrivateFieldSet(that, _Swiper_source, 'autoplay', "f");
-        },
-        transitionEnd() {
-          setTimeout(() => {
-            __classPrivateFieldSet(that, _Swiper_source, '', "f");
-          });
-          that.onAnimationFinish.emit({
+        slideChange(e) {
+          if (__classPrivateFieldGet(that, _Swiper_swiperResetting, "f") || __classPrivateFieldGet(that, _Swiper_lastSwiperActiveIndex, "f") === this.realIndex)
+            return;
+          const currentItemId = that.getCurrentItemId(e);
+          that.onChange.emit({
             current: this.realIndex,
             source: __classPrivateFieldGet(that, _Swiper_source, "f"),
+            currentItemId,
           });
         },
-        observerUpdate(_swiper, e) {
-          const target = e.target;
-          const className = target && typeof target.className === 'string' ? target.className : '';
-          if (className.includes('taro_page') && target.style.display !== 'none') {
-            if (that.autoplay && target.contains(_swiper.$el[0])) {
-              if (that.circular) {
-                _swiper.slideToLoop(this.realIndex, 0); // 更新下标
-              }
-              else {
-                _swiper.slideTo(this.realIndex);
-              }
-            }
-          }
+        init: (e) => {
+          that.getNeedFixLoop() && e.loopFix();
+          that.autoplay && e.autoplay.start();
+        },
+        touchEnd: (e) => {
+          __classPrivateFieldSet(that, _Swiper_source, 'touch', "f");
+          that.autoplay && e.autoplay.start();
+        },
+        touchStart: (e) => {
+          __classPrivateFieldSet(that, _Swiper_source, 'touch', "f");
+          that.autoplay && e.autoplay.pause();
+        },
+        autoplay(e) {
+          // Note: 修复 autoplay 时，切换到其他页面再切回来，autoplay 会停止的问题
+          // autoplay 会调用 slideTo 方法，里面会判断是否 animating，如果 animating 为 true，就会被 return
+          // 参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/slide/slideTo.mjs#27 27行
+          // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/modules/autoplay/autoplay.mjs
+          e.animating = false;
+          __classPrivateFieldSet(that, _Swiper_source, 'autoplay', "f");
         }
-      }
-    };
+      } });
     // 自动播放
     if (autoplay) {
       options.autoplay = {
@@ -309,35 +313,72 @@ export class Swiper {
       };
     }
     this.swiper = new SwiperJS(`.taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container`, options);
-    this.swiperWrapper = this.el.querySelector(`.taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-wrapper`);
+    // Note: 这里是拦截了 swiper 的 minTranslate 和 maxTranslate 方法，手动修复了 loop 模式下的 margin 问题
+    // 因为这两个属性会影响滑动到哪个位置进行 fixloop
+    // 可参考源码：https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/events/onTouchMove.mjs
+    // https://github.com/nolimits4web/swiper/blob/v11.1.0/src/core/loop/loopFix.mjs
+    if (this.getNeedFixLoop()) {
+      // @ts-ignore
+      const minTranslate = this.swiper.minTranslate.bind(this.swiper);
+      //@ts-ignore
+      const maxTranslate = this.swiper.maxTranslate.bind(this.swiper);
+      if (centeredSlides && this.getSlidersList().length < 4) {
+        //@ts-ignore
+        this.swiper.minTranslate = () => minTranslate() + this.parseMargin()[1];
+        //@ts-ignore
+        this.swiper.maxTranslate = () => maxTranslate() - this.parseMargin()[0];
+      }
+      else {
+        //@ts-ignore
+        this.swiper.minTranslate = () => minTranslate() - this.parseMargin()[0];
+        //@ts-ignore
+        this.swiper.maxTranslate = () => maxTranslate() + this.parseMargin()[1];
+      }
+    }
+    this.swiperWrapper = this.swiper.wrapperEl;
+  }
+  // Note: loop 的时候添加 additionalSlides 可以避免循环的时候由于 loopFix 不及时，出现空白的问题。但是并不是 additionalSlides 越多越好，因为 additionalSlides 越多，如果 swiper-item 的数量不够，会导致出现 bug。
+  // 目前的策略是 swiper-item 的数量小于等于 5 时，不添加 additionalSlides，大于 5 小于等于 7 时，添加 1 个 additionalSlides，大于 7 时，添加 2 个 additionalSlides。
+  getLoopAdditionalSlides() {
+    const slidersLength = (this.getSlidersList()).length;
+    if (!this.el || !this.getNeedFixLoop() || slidersLength < ONE_ADDITIONAL_SLIDES_THRESHOLD)
+      return 0;
+    if (slidersLength <= TWO_ADDITIONAL_SLIDES_THRESHOLD)
+      return 1;
+    return 2;
+  }
+  getCurrentItemId(swiper) {
+    const slides = swiper.slides;
+    const activeIndex = swiper.activeIndex;
+    const currentSlide = slides[activeIndex];
+    return currentSlide.getAttribute('item-id');
   }
   render() {
     const { vertical, indicatorDots, indicatorColor, indicatorActiveColor } = this;
-    const hostStyle = { overflow: 'hidden' };
-    const style = { overflow: 'visible' };
+    const [pM, nM] = this.parseMargin();
+    const hasMargin = pM || nM;
+    const hostStyle = {};
+    if (hasMargin) {
+      hostStyle.overflow = 'hidden';
+    }
     if (this.full) {
       hostStyle.height = '100%';
-      style.height = '100%';
-    }
-    const [, previousMargin] = /^(\d+)px/.exec(this.previousMargin) || [];
-    const [, nextMargin] = /^(\d+)px/.exec(this.nextMargin) || [];
-    const pM = parseInt(previousMargin) || 0;
-    const nM = parseInt(nextMargin) || 0;
-    if (vertical) {
-      style.marginTop = `${pM}px`;
-      style.marginBottom = `${nM}px`;
-    }
-    else {
-      style.marginRight = `${nM}px`;
-      style.marginLeft = `${pM}px`;
     }
-    return (h(Host, { class: `taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")}`, style: hostStyle }, h("div", { class: 'swiper-container', style: style }, h("style", { type: 'text/css' }, `
+    const swiperContainerStyleList = [
+      'overflow: visible;',
+      vertical ? `margin-top: ${pM}px; margin-bottom: ${nM}px;` : `margin-right: ${nM}px; margin-left: ${pM}px;`,
+      this.full ? 'height: 100%;' : '',
+    ];
+    const swiperPaginationStyleList = [
+      indicatorDots ? 'opacity: 1;' : 'display: none;',
+      'font-size: 0;'
+    ];
+    return (h(Host, { class: `taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")}`, style: hostStyle }, h("div", { class: 'swiper-container' }, h("style", { type: 'text/css' }, `
               .taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${indicatorColor} }
               .taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
-            `), h("div", { class: 'swiper-wrapper' }, h("slot", null)), h("div", { class: classNames('swiper-pagination', {
-        'swiper-pagination-hidden': !indicatorDots,
-        'swiper-pagination-bullets': indicatorDots
-      }) }))));
+              .taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container { ${swiperContainerStyleList.join('')} }
+              .taro-swiper-${__classPrivateFieldGet(this, _Swiper_id, "f")} > .swiper-container > .swiper-pagination { ${swiperPaginationStyleList.join('')} }
+            `), h("div", { class: 'swiper-wrapper' }, h("slot", null)), h("div", { class: 'swiper-pagination' }))));
   }
   static get is() { return "taro-swiper-core"; }
   static get originalStyleUrls() {
@@ -621,6 +662,26 @@ export class Swiper {
         "attribute": "zoom",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "effectsProps": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Record<string, any>",
+          "resolved": "{ [x: string]: any; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "swiper11 \u76F8\u5173\u7684\u52A8\u6548\u53C2\u6570\uFF0C\u5177\u4F53\u89C1\u6587\u6863 https://swiperjs.com/swiper-api#parameters"
+        },
+        "defaultValue": "{}"
       }
     };
   }
@@ -629,9 +690,7 @@ export class Swiper {
       "swiperWrapper": {},
       "swiper": {},
       "isWillLoadCalled": {},
-      "observer": {},
-      "observerFirst": {},
-      "observerLast": {}
+      "observer": {}
     };
   }
   static get events() {
@@ -696,4 +755,4 @@ export class Swiper {
       }];
   }
 }
-_Swiper_id = new WeakMap(), _Swiper_source = new WeakMap();
+_Swiper_id = new WeakMap(), _Swiper_source = new WeakMap(), _Swiper_swiperResetting = new WeakMap(), _Swiper_domChangeByOutSide = new WeakMap(), _Swiper_lastSwiperActiveIndex = new WeakMap();