@dolphinweex/weex-vue-render 0.2.1 → 0.2.3

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;
@@ -4004,8 +3989,8 @@ function initEnv (viewportInfo, envInfo) {
     isFullScreen: device_display.isFullScreen,
     weexVersion: device_display.weexVersion,
     osName: device_display.osName,
-    statusBarHeight: device_display.statusBarHeight,
-    safeAreaBottomHeight: device_display.safeAreaBottomHeight,
+    statusBarHeight: device_display.statusBarHeight * device_display.scale,
+    safeAreaBottomHeight: device_display.safeAreaBottomHeight * device_display.scale,
     isImmersion: device_display.isImmersion,
     
   };
@@ -5680,6 +5665,8 @@ var DEFAULT_LOADMORE_OFFSET = 0;
 
 function getThrottledScroll (context) {
   var scale = weex.config.env.scale;
+  var rate = 750 / document.documentElement.clientWidth // 750设计稿放缩倍率
+
   if (!context._throttleScroll) {
     var wrapper = context.$refs.wrapper;
     var inner = context.$refs.inner;
@@ -5710,7 +5697,7 @@ function getThrottledScroll (context) {
              *       v y
              *
              */
-            y: -wrapper.scrollTop
+            y: -wrapper.scrollTop * rate
           }
         };
         if (context.$el) {
@@ -5946,23 +5933,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 +6009,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,11 +6096,13 @@ 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) {
+        var computedStyle = window.getComputedStyle(this$1.$el)
+        var paddingTop = parseFloat(computedStyle.paddingTop) 
+        var paddingBottom = parseFloat(computedStyle.paddingBottom)
+        var height = parseFloat(computedStyle.height)
+
+        if (height - paddingTop - paddingBottom <= 1) {
           this$1.$el.classList.remove("height-0");
         }
       }, 0);
@@ -6080,7 +6117,10 @@ function getList (weex) {
         return [
           h('article', {
             ref: 'inner',
-            staticClass: 'weex-list-inner weex-ct'
+            staticClass: 'weex-list-inner weex-ct',
+            staticStyle: {
+              width: "100%"
+            }
           }, this._cells)
         ]
       }
@@ -6102,7 +6142,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,11 +6197,13 @@ 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) {
+        var computedStyle = window.getComputedStyle(this$1.$el)
+        var paddingTop = parseFloat(computedStyle.paddingTop) 
+        var paddingBottom = parseFloat(computedStyle.paddingBottom)
+        var height = parseFloat(computedStyle.height)
+
+        if (height - paddingTop - paddingBottom <= 1) {
           this$1.$el.classList.remove("height-0");
         }
       }, 0);
@@ -6220,7 +6262,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 +6653,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,11 +7115,13 @@ 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) {
+        var computedStyle = window.getComputedStyle(this$1.$el)
+        var paddingTop = parseFloat(computedStyle.paddingTop) 
+        var paddingBottom = parseFloat(computedStyle.paddingBottom)
+        var height = parseFloat(computedStyle.height)
+
+        if (height - paddingTop - paddingBottom <= 1) {
           this$1.$el.classList.remove("height-0");
         }
       }, 0);
@@ -7104,7 +7148,10 @@ function getList$1 (weex) {
         return [
           h('article', {
             ref: 'inner',
-            staticClass: 'weex-recycle-inner weex-ct'
+            staticClass: 'weex-recycle-inner weex-ct',
+            staticStyle: {
+              width: this.scrollDirection == 'vertical' ? "100%" : undefined, 
+            }
           }, [
             _vm._l(_vm._items, function (item, index) {
               return [
@@ -7143,7 +7190,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)
@@ -7158,7 +7205,7 @@ var recycleList = {
   }
 };
 
-__$styleInject("/*\n * Licensed to the Apache Software Foundation (ASF) under one\n * or more contributor license agreements.  See the NOTICE file\n * distributed with this work for additional information\n * regarding copyright ownership.  The ASF licenses this file\n * to you under the Apache License, Version 2.0 (the\n * \"License\"); you may not use this file except in compliance\n * with the License.  You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied.  See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nbody > .weex-list,\nbody > .weex-recycle,\nbody > .weex-scroller,\nbody > .weex-waterfall {\n  max-height: 100%;\n}\n\n.weex-list-wrapper,\n.weex-recycle-wrapper,\n.weex-scroller-wrapper,\n.weex-waterfall-wrapper {\n  -webkit-overflow-scrolling: touch;\n}\n\n.weex-list-wrapper,\n.weex-waterfall-wrapper {\n  overflow-y: scroll !important;\n  overflow-x: hidden !important;\n}\n\n.weex-list-inner,\n.weex-recycle-inner,\n.weex-scroller-inner,\n.weex-waterfall-inner {\n  -webkit-overflow-scrolling: touch;\n}\n\n.weex-waterfall-inner-columns {\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n}\n\n.weex-scroller-wrapper.weex-scroller-vertical,\n.weex-recycle-wrapper.weex-recycle-vertical  {\n  overflow-x: hidden;\n  overflow-y: scroll;\n}\n\n.weex-scroller-wrapper.weex-scroller-horizontal,\n.weex-recycle-wrapper.weex-recycle-horizontal {\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n\n.weex-scroller-wrapper.weex-scroller-disabled {\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.weex-scroller-horizontal .weex-scroller-inner,\n.weex-recycle-horizontal .weex-recycle-inner {\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n  height: 100%;\n}\n\n.weex-cell {\n  width: 100%;\n}\n\n.weex-refresh,\n.weex-loading {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  width: 100%;\n  overflow: hidden;\n}\n",undefined);
+__$styleInject("/*\n * Licensed to the Apache Software Foundation (ASF) under one\n * or more contributor license agreements.  See the NOTICE file\n * distributed with this work for additional information\n * regarding copyright ownership.  The ASF licenses this file\n * to you under the Apache License, Version 2.0 (the\n * \"License\"); you may not use this file except in compliance\n * with the License.  You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied.  See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nbody > .weex-list,\nbody > .weex-recycle,\nbody > .weex-scroller,\nbody > .weex-waterfall {\n  max-height: 100%;\n}\n\n.weex-list-wrapper,\n.weex-recycle-wrapper,\n.weex-scroller-wrapper,\n.weex-waterfall-wrapper {\n  -webkit-overflow-scrolling: touch;\n}\n\n.weex-list-wrapper,\n.weex-waterfall-wrapper, \n.weex-recycle-wrapper {\n  overflow-y: scroll !important;\n  overflow-x: hidden !important;\n  align-items: flex-start !important;\n  justify-content: flex-start !important;\n}\n\n.weex-list-inner,\n.weex-recycle-inner,\n.weex-scroller-inner,\n.weex-waterfall-inner {\n  -webkit-overflow-scrolling: touch;\n}\n\n.weex-waterfall-inner-columns {\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n}\n\n.weex-scroller-wrapper.weex-scroller-vertical,\n.weex-recycle-wrapper.weex-recycle-vertical  {\n  overflow-x: hidden;\n  overflow-y: scroll;\n}\n\n.weex-scroller-wrapper.weex-scroller-horizontal,\n.weex-recycle-wrapper.weex-recycle-horizontal {\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n\n.weex-scroller-wrapper.weex-scroller-disabled {\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.weex-scroller-horizontal .weex-scroller-inner,\n.weex-recycle-horizontal .weex-recycle-inner {\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  -webkit-box-orient: horizontal;\n  height: 100%;\n}\n\n.weex-cell {\n  width: 100%;\n}\n\n.weex-refresh,\n.weex-loading {\n  -webkit-box-align: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  justify-content: center;\n  width: 100%;\n  overflow: hidden;\n}\n",undefined);
 
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
@@ -7224,6 +7271,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 +7384,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 +7461,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 +7525,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 +7645,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 +7738,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 +7767,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 +7777,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 +7865,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 +7908,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 +7928,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 +7954,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 +7992,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.3"
 }