fix(components): 修复 swiper 在 circular 模式下自动播放故障

NervJS · Dec 30, 2022 · 6291beb · 6291beb
1 parent abba3dd
commit 6291beb
Showing 1 changed file with 20 additions and 20 deletions.
diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Watch, Host, Element, State } from '@stencil/core'
 import classNames from 'classnames'
 import type ISwiper from 'swiper'
@@ -119,18 +118,21 @@ export class Swiper implements ComponentInterface {
   watchAutoplay (newVal) {
     if (!this.isWillLoadCalled || !this.swiper) return
 
-    if (this.swiper.autoplay.running === newVal) return
-
-    if (newVal) {
-      if (this.swiper.params && typeof this.swiper.params.autoplay === 'object') {
-        if (this.swiper.params.autoplay.disableOnInteraction === true) {
-          this.swiper.params.autoplay.disableOnInteraction = false
+    const swiperAutoplay = this.swiper.autoplay
+    if (swiperAutoplay) {
+      if (swiperAutoplay.running === newVal) return
+
+      if (newVal) {
+        if (this.swiper.params && typeof this.swiper.params.autoplay === 'object') {
+          if (this.swiper.params.autoplay.disableOnInteraction === true) {
+            this.swiper.params.autoplay.disableOnInteraction = false
+          }
+          this.swiper.params.autoplay.delay = this.interval
         }
-        this.swiper.params.autoplay.delay = this.interval
+        swiperAutoplay.start()
+      } else {
+        swiperAutoplay.stop()
       }
-      this.swiper.autoplay.start()
-    } else {
-      this.swiper.autoplay.stop()
     }
   }
 
@@ -189,7 +191,7 @@ export class Swiper implements ComponentInterface {
     this.handleInit()
     if (!this.swiper || !this.circular) return
 
-    const wrapper = this.swiper.$wrapperEl[0]
+    const wrapper = this.swiper.$wrapperEl?.[0]
     this.observer = new MutationObserver(this.handleSwiperLoopListen)
 
     this.observer.observe(wrapper, {
@@ -199,8 +201,8 @@ export class Swiper implements ComponentInterface {
 
   componentWillUpdate () {
     if (!this.swiper) return
-    if (this.autoplay && !this.swiper.autoplay.running) {
-      this.swiper.autoplay.start()
+    if (this.autoplay && !this.swiper.autoplay?.running) {
+      this.swiper.autoplay?.start()
     }
     this.swiper.update() // 更新子元素
   }
@@ -222,7 +224,7 @@ export class Swiper implements ComponentInterface {
     this.observerLast?.disconnect && this.observerLast.disconnect()
     this.observerFirst = new MutationObserver(this.handleSwiperLoop)
     this.observerLast = new MutationObserver(this.handleSwiperLoop)
-    const wrapper = this.swiper.$wrapperEl[0]
+    const wrapper = this.swiper.$wrapperEl?.[0]
     const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)')
     if (list.length >= 1) {
       this.observerFirst.observe(list[0], {
@@ -238,11 +240,9 @@ export class Swiper implements ComponentInterface {
   handleSwiperLoop = debounce(() => {
     if (this.swiper && this.circular) {
       // @ts-ignore
-      this.swiper.loopDestroy()
-      // @ts-ignore
-      this.swiper.loopCreate()
+      this.swiper.loopFix()
     }
-  }, 500)
+  }, 50)
 
   handleSwiperSize = debounce(() => {
     if (this.swiper && !this.circular) {
@@ -282,7 +282,7 @@ export class Swiper implements ComponentInterface {
          slideChangeTransitionStart (_swiper: ISwiper) {
           if (that.circular) {
             if (_swiper.isBeginning || _swiper.isEnd) {
-              _swiper.slideToLoop(this.realIndex, 0) // 更新下标
+              // _swiper.slideToLoop(this.realIndex, 0, false) // 更新下标
               return
             }
           }