@dolphinweex/weex-vue-render 0.2.1 → 0.2.2

package/dist/index.common.js

@@ -8,21 +8,6 @@ console.log('START WEEX VUE RENDER: 1.0.36, Build 2018-12-29 17:52.');
 	(global.WeexVueRender = factory());
 }(this, (function () { 'use strict';
 
-function isAbsoluteOrFixedPositioned(element, deep=2) {
-    let currentElement = element;
-
-    let deep_ = 0;
-    while (currentElement && deep_ <= deep) {
-        deep_++;
-        const position = window.getComputedStyle(currentElement).position;
-        if (position === 'absolute' || position === 'fixed') {
-            return true;
-        }
-        currentElement = currentElement.parentElement;
-    }
-    return false;
-}
-
 function __$styleInject(css, returnValue) {
   if (typeof document === 'undefined') {
     return returnValue;
@@ -5946,23 +5931,59 @@ var scrollable$1 = {
     },
 
     handleTouchStart: function handleTouchStart (event) {
-      if (this._loading || this._refresh) {
-        var touch = event.changedTouches[0];
-        this._touchParams = {
-          reachTop: this.reachTop(),
-          reachBottom: this.reachBottom(),
-          startTouchEvent: touch,
-          startX: touch.pageX,
-          startY: touch.pageY,
-          timeStamp: event.timeStamp
-        };
-      }
+      var touch = event.changedTouches[0];
+      this._touchParams = {
+        reachTop: this.reachTop(),
+        reachBottom: this.reachBottom(),
+        startTouchEvent: touch,
+        startX: touch.pageX,
+        startY: touch.pageY,
+        timeStamp: event.timeStamp
+      };
     },
 
     handleTouchMove: function handleTouchMove (event) {
-      if (!this._touchParams || !this._refresh && !this._loading) {
+      if (!this._touchParams) {
+        return
+      }
+
+      var tp = this._touchParams;
+      if (!tp) { return } 
+
+      var ref = this._touchParams;
+      var startX = ref.startX;
+      var startY = ref.startY;
+      var touch = event.changedTouches[0];
+      var offsetX = touch.pageX - startX;
+      var offsetY = touch.pageY - startY;
+      tp.offsetX = offsetX;
+      tp.offsetY = offsetY;
+      var isV = tp.isVertical;
+      if (typeof isV === 'undefined') {
+        isV = tp.isVertical = Math.abs(offsetX) < Math.abs(offsetY);
+      }
+
+      // 如果是水平滚动，并且手势是水平方向，则阻止冒泡
+      // 如果是垂直滚动，并且手势是垂直方向，则阻止冒泡
+      var isScrollHorizontal = this.$el.classList.value.indexOf("weex-scroller-horizontal") > -1 || this.$el.classList.value.indexOf("weex-recycle-horizontal") > -1
+      console.log("dom", this.$el.classList.value)
+      if (isScrollHorizontal) {
+        if (!isV) {
+          // 水平
+          event.stopPropagation();
+          return;
+        } 
+        return;
+      }else {
+        if (!isV) {
+          return;
+        }
+      }
+      
+      if (!this._refresh && !this._loading) {
         return
       }
+
       var inner = this.$refs.inner;
       var ref = this._touchParams;
       var startY = ref.startY;
@@ -5986,6 +6007,18 @@ var scrollable$1 = {
       if (!this._touchParams || !this._refresh && !this._loading) {
         return
       }
+      var tp = this._touchParams;
+      var isV = tp.isVertical;
+      if (this.scrollDirection === 'horizontal' && !isV) {
+        // 水平
+        event.stopPropagation();
+      }else if (isV) {
+        // 垂直
+        event.stopPropagation();
+      }else {
+        return;
+      } 
+
       var inner = this.$refs.inner;
       var ref = this._touchParams;
       var startY = ref.startY;
@@ -6061,9 +6094,6 @@ function getList (weex) {
     },
     mounted: function mounted () {
       var this$1 = this;
-      if (isAbsoluteOrFixedPositioned(this$1.$el)) {
-        this$1.$el.classList.remove("height-0");
-      }
       setTimeout(() => {
         if (this$1.$el.clientHeight == 0) {
           this$1.$el.classList.remove("height-0");
@@ -6102,7 +6132,7 @@ function getList (weex) {
         on: {
           scroll: this.handleScroll,
           touchstart: this.handleTouchStart,
-          touchmove: this.handleTouchMove,
+          touchmove: this.handleTouchMove.bind(this),
           touchend: this.handleTouchEnd
         },
         staticStyle: extractComponentStyle(this)
@@ -6157,9 +6187,6 @@ function getScroller (weex) {
     },
     mounted: function mounted () {
       var this$1 = this;
-      if (isAbsoluteOrFixedPositioned(this$1.$el)) {
-        this$1.$el.classList.remove("height-0");
-      }
       setTimeout(() => {
         if (this$1.$el.clientHeight == 0) {
           this$1.$el.classList.remove("height-0");
@@ -6220,7 +6247,7 @@ function getScroller (weex) {
         on: {
           scroll: this.handleScroll,
           touchstart: this.handleTouchStart,
-          touchmove: this.handleTouchMove,
+          touchmove: this.handleTouchMove.bind(this),
           touchend: this.handleTouchEnd
         },
         staticClass: this.wrapperClass,
@@ -6611,7 +6638,7 @@ function getWaterfall (weex) {
         on: {
           scroll: this.handleScroll,
           touchstart: this.handleTouchStart,
-          touchmove: this.handleTouchMove,
+          touchmove: this.handleTouchMove.bind(this),
           touchend: this.handleTouchEnd
         },
         staticClass: 'weex-waterfall weex-waterfall-wrapper weex-ct',
@@ -7073,9 +7100,6 @@ function getList$1 (weex) {
     },
     mounted: function mounted () {
       var this$1 = this;
-      if (isAbsoluteOrFixedPositioned(this$1.$el)) {
-        this$1.$el.classList.remove("height-0");
-      }
       setTimeout(() => {
         if (this$1.$el.clientHeight == 0) {
           this$1.$el.classList.remove("height-0");
@@ -7143,7 +7167,7 @@ function getList$1 (weex) {
         on: {
           scroll: this.handleScroll,
           touchstart: this.handleTouchStart,
-          touchmove: this.handleTouchMove,
+          touchmove: this.handleTouchMove.bind(this),
           touchend: this.handleTouchEnd
         },
         staticStyle: extractComponentStyle(this)
@@ -7224,6 +7248,8 @@ var MAIN_SLIDE_OPACITY = 1;
 var THROTTLE_SCROLL_TIME = 25;
 var INTERVAL_MINIMUM = 200;
 
+var touchSliderInstance = null;
+
 var slideMixin = {
   created: function created () {
     this._clones = [];
@@ -7335,7 +7361,7 @@ var slideMixin = {
           attrs: { 'weex-type': this.isNeighbor ? 'slider-neighbor' : 'slider' },
           on: {
             touchstart: this._handleTouchStart,
-            touchmove: weex.utils.throttle(weex.utils.bind(this._handleTouchMove, this), 25),
+            touchmove: weex.utils.throttle(weex.utils.bind(this._handleTouchMove, this), 10),
             touchend: this._handleTouchEnd,
             touchcancel: this._handleTouchCancel
           },
@@ -7412,16 +7438,19 @@ var slideMixin = {
         this._prepareNodes();
         var translate = weex.utils.getTransformObj(inner).translate;
         var match = translate && translate.match(/translate[^(]+\(([+-\d.]+)/);
-        var innerX = match && match[1] || 0;
+        var innerX = parseFloat(inner.style.left); //match && match[1] || 0;
         var dist = innerX - this.innerOffset;
         this.innerOffset += step * this._wrapperWidth;
         // transform the whole slides group.
-        inner.style.webkitTransition = "-webkit-transform " + (TRANSITION_TIME / 1000) + "s ease-in-out";
-        inner.style.mozTransition = "transform " + (TRANSITION_TIME / 1000) + "s ease-in-out";
-        inner.style.transition = "transform " + (TRANSITION_TIME / 1000) + "s ease-in-out";
-        inner.style.webkitTransform = "translate3d(" + (this.innerOffset) + "px, 0, 0)";
-        inner.style.mozTransform = "translate3d(" + (this.innerOffset) + "px, 0, 0)";
-        inner.style.transform = "translate3d(" + (this.innerOffset) + "px, 0, 0)";
+         
+        inner.style.webkitTransition = "left " + (TRANSITION_TIME / 1000) + "s ease-in-out";
+        inner.style.mozTransition = "left " + (TRANSITION_TIME / 1000) + "s ease-in-out";
+        inner.style.transition = "left " + (TRANSITION_TIME / 1000) + "s ease-in-out";
+        // inner.style.webkitTransform = "translate3d(" + (this.innerOffset) + "px, 0, 0)";
+        // inner.style.mozTransform = "translate3d(" + (this.innerOffset) + "px, 0, 0)";
+        // inner.style.transform = "translate3d(" + (this.innerOffset) + "px, 0, 0)";
+        inner.style.left = this.innerOffset + 'px'
+
 
         // emit scroll events.
         if (!isTouchScroll) {
@@ -7473,9 +7502,11 @@ var slideMixin = {
         var node = this$1._showNodes[i];
         node = node && node.firstElementChild;
         if (!node) { continue }
-        weex.utils.addTransform(this$1._showNodes[i].firstElementChild, {
-          translate: 'translate3d(0px, 0px, 0px)'
-        });
+        // ddd
+        // weex.utils.addTransform(this$1._showNodes[i].firstElementChild, {
+        //   translate: 'translate3d(0px, 0px, 0px)'
+        // });
+        this$1._showNodes[i].firstElementChild.left = '0px'
       }
     },
 
@@ -7591,9 +7622,12 @@ var slideMixin = {
 
       node._inShow = true;
       var translateX = index * this._wrapperWidth - this.innerOffset;
-      weex.utils.addTransform(node, {
-        translate: ("translate3d(" + translateX + "px, 0px, 0px)")
-      });
+      // ddd
+      // weex.utils.addTransform(node, {
+      //   translate: ("translate3d(" + translateX + "px, 0px, 0px)")
+      // });
+      node.style.left = translateX + 'px'
+
       node.style.zIndex = 99 - Math.abs(index);
       node.style.opacity = 1;
       node._showIndex = index;
@@ -7681,15 +7715,18 @@ var slideMixin = {
       if ( transformExtra === void 0 ) transformExtra = {};
 
       weex.utils.extendKeys(to.style, from.style, styles);
+      to.style.left = from.style.left;
       var transObj = weex.utils.getTransformObj(from);
-      for (var k in transformExtra) {
-        transObj[k] = transformExtra[k];
-      }
-      weex.utils.addTransform(to, transObj);
-      var fromInner = from.firstElementChild;
-      var toInner = to.firstElementChild;
-      toInner.style.opacity = fromInner.style.opacity;
-      weex.utils.copyTransform(fromInner, toInner);
+      if (transObj) {
+        for (var k in transformExtra) {
+          transObj[k] = transformExtra[k];
+        }
+        weex.utils.addTransform(to, transObj);
+        var fromInner = from.firstElementChild;
+        var toInner = to.firstElementChild;
+        toInner.style.opacity = fromInner.style.opacity;
+        weex.utils.copyTransform(fromInner, toInner);
+      }
     },
 
     /**
@@ -7707,7 +7744,7 @@ var slideMixin = {
         return
       }
       var origShowIndex = origNode._showIndex;
-      var styleProps = ['opacity', 'zIndex'];
+      var styleProps = ['opacity', 'zIndex', 'left'];
       var cl;
       if (Math.abs(origShowIndex) <= 1) {
         // leave a clone to replace the origNode in the show zone(-1 ~ 1).
@@ -7717,9 +7754,12 @@ var slideMixin = {
       }
       origNode._inShow = true;
       var transObj = weex.utils.getTransformObj(clone);
-      transObj.translate = transObj.translate.replace(/[+-\d.]+[pw]x/, function ($0) {
-        return pos * this$1._wrapperWidth - this$1.innerOffset + 'px'
-      });
+      if (transObj.translate) {
+        transObj.translate = transObj.translate.replace(/[+-\d.]+[pw]x/, function ($0) {
+          return pos * this$1._wrapperWidth - this$1.innerOffset + 'px'
+        });
+      }
+      
       this._copyStyle(clone, origNode, styleProps, transObj);
       this._removeClone(clone);
       if (!cl) {
@@ -7802,7 +7842,11 @@ var slideMixin = {
           translateX = 0;
         }
         transObj.translate = "translate3d(" + translateX + "px, 0px, 0px)";
-        weex.utils.addTransform(elm, transObj);
+
+        // ddd
+        // weex.utils.addTransform(elm, transObj);
+        elm.style.left = translateX + 'px'
+
         elm.style.opacity = i === 0 ? MAIN_SLIDE_OPACITY : this$1.neighborAlpha;
       }
     },
@@ -7841,9 +7885,7 @@ var slideMixin = {
     _handleTouchMove: function _handleTouchMove (event) {
       var tp = this._touchParams;
       if (!tp) { return }
-      if (this._sliding) {
-        return
-      }
+
       var ref = this._touchParams;
       var startX = ref.startX;
       var startY = ref.startY;
@@ -7863,9 +7905,24 @@ var slideMixin = {
       if (isV) {
         return
       }
-      // horizontal scroll. trigger scroll event.
-      event.preventDefault();
+
+      if (this._sliding) {
+        event.stopPropagation();
+        return
+      }
+
       var inner = this.$refs.inner;
+      // 如果已经有一个激活的slider，则不再处理其他slider
+      if (touchSliderInstance && touchSliderInstance != inner) {
+        event.stopPropagation();
+        return;
+      }
+
+      // horizontal scroll. trigger scroll event.
+      event.stopPropagation()
+
+      touchSliderInstance = inner;
+
       if (inner && offsetX) {
         if (!this._nodesOffsetCleared) {
           this._nodesOffsetCleared = true;
@@ -7874,21 +7931,31 @@ var slideMixin = {
         this._emitScrollEvent('weex$scroll', {
           offsetXRatio: offsetX / this._wrapperWidth
         });
-        inner.style.webkitTransform = "translate3d(" + (this.innerOffset + offsetX) + "px, 0, 0)";
-        inner.style.mozTransform = "translate3d(" + (this.innerOffset + offsetX) + "px, 0, 0)";
-        inner.style.transform = "translate3d(" + (this.innerOffset + offsetX) + "px, 0, 0)";
+        // ddd
+        // inner.style.webkitTransform = "translate3d(" + (this.innerOffset + offsetX) + "px, 0, 0)";
+        // inner.style.mozTransform = "translate3d(" + (this.innerOffset + offsetX) + "px, 0, 0)";
+        // inner.style.transform = "translate3d(" + (this.innerOffset + offsetX) + "px, 0, 0)";
+        inner.style.left = (this .innerOffset + offsetX) + 'px'
       }
     },
 
     _handleTouchEnd: function _handleTouchEnd (event) {
+      var inner = this.$refs.inner;
+      if (touchSliderInstance == inner) {
+        touchSliderInstance= null;
+      } else {
+        return;
+      }
+
       this._startAutoPlay();
       var tp = this._touchParams;
       if (!tp) { return }
       var isV = tp.isVertical;
-      if (typeof isV === 'undefined') {
+      if (typeof isV === 'undefined' || isV) {
         return
       }
-      var inner = this.$refs.inner;
+ 
+      event.stopPropagation();
       var offsetX = tp.offsetX;
       if (inner) {
         this._nodesOffsetCleared = false;
@@ -7902,6 +7969,11 @@ var slideMixin = {
     },
 
     _handleTouchCancel: function _handleTouchCancel (event) {
+      var inner = this.$refs.inner;
+      if (touchSliderInstance == inner) {
+        touchSliderInstance= null;
+      }
+
       return this._handleTouchEnd(event)
     },
 

package/package.json

@@ -49,5 +49,5 @@
     "type": "git",
     "url": "git+ssh://git@github.com/weexteam/weex-vue-render.git"
   },
-  "version": "0.2.1"
+  "version": "0.2.2"
 }