fix(taro-components): H5 Swiper问题 close #1528

NervJS · Dec 17, 2018 · 0df6b30 · 0df6b30
1 parent 10a27fc
commit 0df6b30
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/packages/taro-components/package.json b/packages/taro-components/package.json
@@ -11,6 +11,7 @@
     "types"
   ],
   "scripts": {
+    "local-dev": "webpack-dev-server --config webpack.config.js --env development",
     "dev": "webpack --config webpack.prod.config.js --watch",
     "deploy": "webpack --config webpack.config.js",
     "build": "webpack --config webpack.prod.config.js",

diff --git a/packages/taro-components/src/components/swiper/index.js b/packages/taro-components/src/components/swiper/index.js
@@ -43,13 +43,14 @@ class Swiper extends Nerv.Component {
       slidesPerView: parseInt(displayMultipleItems, 10),
       initialSlide: parseInt(current, 10),
       speed: parseInt(duration, 10),
+      observer: true,
       on: {
         slideChange () {
           let e = new TouchEvent('touchend')
           Object.defineProperty(e, 'detail', {
             enumerable: true,
             value: {
-              current: this.activeIndex
+              current: this.realIndex
             }
           })
           onChange && onChange(e)
@@ -59,7 +60,7 @@ class Swiper extends Nerv.Component {
           Object.defineProperty(e, 'detail', {
             enumerable: true,
             value: {
-              current: this.activeIndex
+              current: this.realIndex
             }
           })
           onAnimationfinish && onAnimationfinish(e)
@@ -79,14 +80,15 @@ class Swiper extends Nerv.Component {
     this.mySwiper = new Swipers(this.$el, opt)
   }
 
-  componentDidUpdate () {
-    this.mySwiper.updateSlides() // 更新子元素
+  componentWillReceiveProps (nextProps) {
+    const nextCurrent = nextProps.current || 0
     // 是否衔接滚动模式
-    if (this.props.circular) {
-      this.mySwiper.slideToLoop(parseInt(this.props.current, 10)) // 更新下标
+    if (nextProps.circular) {
+      this.mySwiper.slideToLoop(parseInt(nextCurrent, 10)) // 更新下标
     } else {
-      this.mySwiper.slideTo(parseInt(this.props.current, 10)) // 更新下标
+      this.mySwiper.slideTo(parseInt(nextCurrent, 10)) // 更新下标
     }
+    this.mySwiper.update() // 更新子元素
   }
 
   componentWillUnmount () {

diff --git a/packages/taro-components/src/components/swiper/style/index.scss b/packages/taro-components/src/components/swiper/style/index.scss
@@ -1,3 +1,6 @@
 .swiper-container {
     height: 150px;
+}
+.swiper-pagination {
+    font-size: 0;
 }
diff --git a/packages/taro-components/src/components/view/index.js b/packages/taro-components/src/components/view/index.js
@@ -19,7 +19,8 @@ class View extends Nerv.Component {
       onTouchEnd,
       className,
       hoverStartTime = 50,
-      hoverStayTime = 400
+      hoverStayTime = 400,
+      ...other
     } = this.props
     const cls = classNames(
       '',
@@ -69,6 +70,7 @@ class View extends Nerv.Component {
           'hoverStartTime',
           'hoverStayTime'
         ])}
+        {...other}
         className={cls}
         onTouchStart={_onTouchStart}
         onTouchEnd={_onTouchEnd}