feat: swiper support 「pre/next」margin fix #1392

NervJS · Apr 1, 2020 · 9bd9e03 · justrustc · Apr 15, 2020 · 9bd9e03
1 parent 624480b
commit 9bd9e03
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/docs/components/viewContainer/swiper.md b/docs/components/viewContainer/swiper.md
@@ -78,9 +78,9 @@ class App extends Component {
 | SwiperProps.duration | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |  |
 | SwiperProps.circular | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
 | SwiperProps.vertical | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
-| SwiperProps.previousMargin | ✔️ |  |  |  |  |  |
-| SwiperProps.nextMargin | ✔️ |  |  |  |  |  |
-| SwiperProps.displayMultipleItems | ✔️ | ✔️ |  | ✔️ |  |  |
+| SwiperProps.previousMargin | ✔️ |  |  |  | ✔️ |  |
+| SwiperProps.nextMargin | ✔️ |  |  |  | ✔️ |  |
+| SwiperProps.displayMultipleItems | ✔️ | ✔️ |  | ✔️ | ✔️ |  |
 | SwiperProps.skipHiddenItemLayout | ✔️ | ✔️ |  |  |  |  |
 | SwiperProps.easingFunction | ✔️ |  |  |  |  |  |
 | SwiperProps.onChange | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |

diff --git a/packages/taro-components/src/components/swiper/index.js b/packages/taro-components/src/components/swiper/index.js
@@ -59,7 +59,7 @@ class Swiper extends Nerv.Component {
     const that = this
     const opt = {
       // 指示器
-      pagination: { el: `.taro-swiper-${this._id} .swiper-pagination` },
+      pagination: { el: `.taro-swiper-${this._id} .swiper-container .swiper-pagination` },
       direction: vertical ? 'vertical' : 'horizontal',
       loop: circular,
       slidesPerView: parseFloat(displayMultipleItems, 10),
@@ -119,13 +119,15 @@ class Swiper extends Nerv.Component {
     if (this.mySwiper) {
       const nextCurrent = typeof nextProps.current === 'number' ? nextProps.current : this._$current || 0
 
-      // 是否衔接滚动模式
-      if (nextProps.circular) {
-        this.mySwiper.loopDestroy()
-        this.mySwiper.loopCreate()
-        this.mySwiper.slideToLoop(parseInt(nextCurrent, 10)) // 更新下标
-      } else {
-        this.mySwiper.slideTo(parseInt(nextCurrent, 10)) // 更新下标
+      if (!this.mySwiper.isBeginning && !this.mySwiper.isEnd) {
+        // 是否衔接滚动模式
+        if (nextProps.circular) {
+          this.mySwiper.loopDestroy()
+          this.mySwiper.loopCreate()
+          this.mySwiper.slideToLoop(parseInt(nextCurrent, 10)) // 更新下标
+        } else {
+          this.mySwiper.slideTo(parseInt(nextCurrent, 10)) // 更新下标
+        }
       }
 
       // 判断是否需要停止或开始自动轮播
@@ -168,11 +170,23 @@ class Swiper extends Nerv.Component {
     typeof func === 'function' && func(e)
   }
 
+  parsePX (s = '0px') {
+    return parseFloat(s.replace(/r*px/i, ''), 10)
+  }
+
   render () {
-    const { className, style, indicatorColor, indicatorActiveColor } = this.props
+    const { className, style, vertical, previousMargin, nextMargin, indicatorColor, indicatorActiveColor } = this.props
     let defaultIndicatorColor = indicatorColor || 'rgba(0, 0, 0, .3)'
     let defaultIndicatorActiveColor = indicatorActiveColor || '#000'
-    const cls = classNames(`taro-swiper-${this._id}`, 'swiper-container', className)
+    const cls = classNames(`taro-swiper-${this._id}`, className)
+    const sty = Object.assign({
+      paddingTop: vertical ? this.parsePX(previousMargin) : 0,
+      paddingRight: vertical ? 0 : this.parsePX(nextMargin),
+      paddingBottom: vertical ? this.parsePX(nextMargin) : 0,
+      paddingLeft: vertical ? 0 : this.parsePX(previousMargin),
+      overflow: 'hidden'
+    }, style)
+    console.log(sty)
     const paginationCls = classNames(
       'swiper-pagination',
       {
@@ -181,17 +195,19 @@ class Swiper extends Nerv.Component {
       }
     )
     return (
-      <div className={cls} style={style} ref={(el) => { this.$el = el }}>
-        <div
-          dangerouslySetInnerHTML={{
-            __html: `<style type='text/css'>
-            .taro-swiper-${this._id} .swiper-pagination-bullet { background: ${defaultIndicatorColor} }
-            .taro-swiper-${this._id} .swiper-pagination-bullet-active { background: ${defaultIndicatorActiveColor} }
-            </style>`
-          }}
-        />
-        <div className='swiper-wrapper'>{this.props.children}</div>
-        <div className={paginationCls} />
+      <div className={cls} style={sty}>
+        <div className='swiper-container' style={{ overflow: 'visible' }} ref={(el) => { this.$el = el }}>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: `<style type='text/css'>
+              .taro-swiper-${this._id} .swiper-container .swiper-pagination-bullet { background: ${defaultIndicatorColor} }
+              .taro-swiper-${this._id} .swiper-container .swiper-pagination-bullet-active { background: ${defaultIndicatorActiveColor} }
+              </style>`
+            }}
+          />
+          <div className='swiper-wrapper'>{this.props.children}</div>
+          <div className={paginationCls} />
+        </div>
       </div>
     )
   }

diff --git a/packages/taro-components/types/Swiper.d.ts b/packages/taro-components/types/Swiper.d.ts
@@ -63,19 +63,19 @@ interface SwiperProps extends StandardProps {
 
   /** 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    * @default "0px"
-   * @supported weapp
+   * @supported weapp, h5
    */
   previousMargin?: string
 
   /** 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    * @default "0px"
-   * @supported weapp
+   * @supported weapp, h5
    */
   nextMargin?: string
 
   /** 同时显示的滑块数量
    * @default 1
-   * @supported weapp, swan, tt
+   * @supported weapp, swan, tt, h5
    */
   displayMultipleItems?: number