fix: 修复swiper在item数量太少时无法循环的问题 (#16737)

* fix: 修复swiper在item数量太少时无法循环的问题 * test: update sanpshoot
NervJS · Oct 25, 2024 · c378497 · c378497
1 parent acaf859
commit c378497
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 24 deletions.
diff --git a/packages/taro-components-react/src/components/swiper/index.tsx b/packages/taro-components-react/src/components/swiper/index.tsx
@@ -172,7 +172,7 @@ class SwiperInner extends React.Component<SwiperProps, SwiperState> {
     }
 
     const loopAdditionalSlides = this.getLoopAdditionalSlides()
-    const centeredSlides = parseFloat(String(displayMultipleItems)) === 1
+    const centeredSlides = displayMultipleItems === 1 && this.getNeedFixLoop()
     const slidesPerView = parseFloat(String(displayMultipleItems)) === 1 ? 'auto' : displayMultipleItems
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this
@@ -461,11 +461,7 @@ class SwiperInner extends React.Component<SwiperProps, SwiperState> {
     const defaultIndicatorActiveColor = indicatorActiveColor || '#000'
     const [pM, nM] = this.parseMargin()
     const cls = classNames(`taro-swiper-${this._id}`, className)
-    const sty = Object.assign({}, style)
-    const hasMargin = pM || nM
-    if (hasMargin) {
-      sty.overflow = 'hidden'
-    }
+    const sty = Object.assign({ overflow: 'hidden' }, style)
     if (this.props.full) {
       sty.height = '100%'
     }

diff --git a/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap b/packages/taro-components/__tests__/__snapshots__/swiper.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Swiper events 1`] = `
-<taro-swiper-core class="taro-swiper-6">
+<taro-swiper-core class="taro-swiper-6" style="overflow: hidden;">
   <!---->
   <div class="swiper-container">
     <style type="text/css">
@@ -30,7 +30,7 @@ exports[`Swiper events 1`] = `
 `;
 
 exports[`Swiper props 1`] = `
-<taro-swiper-core class="taro-swiper-0">
+<taro-swiper-core class="taro-swiper-0" style="overflow: hidden;">
   <!---->
   <div class="swiper-container">
     <style type="text/css">
@@ -59,7 +59,7 @@ exports[`Swiper props 1`] = `
 `;
 
 exports[`Swiper should autoplay 1`] = `
-<taro-swiper-core class="taro-swiper-1">
+<taro-swiper-core class="taro-swiper-1" style="overflow: hidden;">
   <!---->
   <div class="swiper-container">
     <style type="text/css">
@@ -88,7 +88,7 @@ exports[`Swiper should autoplay 1`] = `
 `;
 
 exports[`Swiper should be circular 1`] = `
-<taro-swiper-core class="taro-swiper-2">
+<taro-swiper-core class="taro-swiper-2" style="overflow: hidden;">
   <!---->
   <div class="swiper-container">
     <style type="text/css">
@@ -117,7 +117,7 @@ exports[`Swiper should be circular 1`] = `
 `;
 
 exports[`Swiper should be vertical 1`] = `
-<taro-swiper-core class="taro-swiper-3">
+<taro-swiper-core class="taro-swiper-3" style="overflow: hidden;">
   <!---->
   <div class="swiper-container">
     <style type="text/css">
@@ -146,7 +146,7 @@ exports[`Swiper should be vertical 1`] = `
 `;
 
 exports[`Swiper should display multi items within screen width 1`] = `
-<taro-swiper-core class="taro-swiper-5">
+<taro-swiper-core class="taro-swiper-5" style="overflow: hidden;">
   <!---->
   <div class="swiper-container">
     <style type="text/css">

diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx
@@ -308,7 +308,7 @@ export class Swiper implements ComponentInterface {
       }
     }
     const loopAdditionalSlides = this.getLoopAdditionalSlides()
-    const centeredSlides = displayMultipleItems === 1
+    const centeredSlides = displayMultipleItems === 1 && this.getNeedFixLoop()
     const slidesPerView = displayMultipleItems === 1 ? 'auto' : displayMultipleItems
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this
@@ -458,26 +458,22 @@ export class Swiper implements ComponentInterface {
       indicatorActiveColor
     } = this
 
-    const [pM, nM] = this.parseMargin()
-    const hasMargin = pM || nM
-    const hostStyle: Record<string, string> = {}
-    if(hasMargin) {
-      hostStyle.overflow = 'hidden'
-    }
-    if (this.full) {
-      hostStyle.height = '100%'
-    }
-
+    const [pM, nM] = this.parseMargin()  
     const swiperContainerStyleList: string [] = [
       '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: string [] = [
       indicatorDots ? 'opacity: 1;' : 'display: none;',
       'font-size: 0;'
     ]
+    const hostStyle: Record<string, string> = { overflow: 'hidden' }
+
+    if (this.full) {
+      hostStyle.height = '100%'
+    }
+
 
     return (
       <Host class={`taro-swiper-${this.#id}`} style={hostStyle}>