@dolphinweex/weex-vue-render 0.2.18 → 0.2.20

package/dist/index.common.js

@@ -3463,12 +3463,15 @@ function applySrc (item, src, placeholderSrc) {
   if (item._src_loading === src) {
     return
   }
-
+  function isEncoded(url) { //检查 % 后是否是合法的编码
+    return /%[0-9A-Fa-f]{2}/.test(url);
+  }
   /**
    * 1. apply src immediately in case javscript blocks the image loading
    *  before next tick.
    */
-  item.style.backgroundImage = "url(" + (src ? encodeURI(decodeURI(src)) : '') + ")";
+  const finalUrl = isEncoded(src) ? src : encodeURI(src);
+  item.style.backgroundImage = "url(" + (src ? finalUrl : '') + ")";
   item.removeAttribute(lazyloadAttr);
   /**
    * 2. then load the img src with Image constructor (but would not post
@@ -3476,7 +3479,8 @@ function applySrc (item, src, placeholderSrc) {
    */
   item._src_loading = src;
   preLoadImg(src, function (evt) {
-    item.style.backgroundImage = "url(" + (src ? encodeURI(decodeURI(src)) : '') + ")";
+   const finalUrl = isEncoded(src) ? src : encodeURI(src);
+    item.style.backgroundImage = "url(" + (src ? finalUrl : '') + ")";
     var ref = this;
     var naturalWidth = ref.width;
     var naturalHeight = ref.height;
@@ -3493,8 +3497,9 @@ function applySrc (item, src, placeholderSrc) {
     };
     dispatchNativeEvent(item, 'load', params);
     if (placeholderSrc) {
+      const finalUrl = isEncoded(placeholderSrc) ? placeholderSrc : encodeURI(placeholderSrc);
       preLoadImg(placeholderSrc, function () {
-        item.style.backgroundImage = "url(" + (placeholderSrc ? encodeURI(decodeURI(placeholderSrc)) : '') + ")";
+        item.style.backgroundImage = "url(" + (placeholderSrc ? finalUrl : '') + ")";
       });
     }
     finallCb();
@@ -7400,6 +7405,7 @@ var slideMixin = {
     this._clones = [];
     this.innerOffset = 0;
     this._indicator = null;
+    this.cloneIndex = Boolean(this.infinite) //需要减或者加去克隆下标
   },
 
   beforeUpdate: function beforeUpdate () {
@@ -7455,7 +7461,7 @@ var slideMixin = {
 
   mounted: function mounted () {
     this._getWrapperSize();
-    this._slideTo(this.currentIndex);
+    this._slideTo(this.currentIndex + this.cloneIndex);
     weex.utils.fireLazyload(this.$el, true);
   },
 
@@ -7487,10 +7493,35 @@ var slideMixin = {
           staticClass: ("weex-slider-cell weex-ct" + (this$1.isNeighbor ? ' neighbor-cell' : ''))
         }, [vnode])
       });
+
+      if (this.infinite && cells.length > 1) {
+        // 克隆第一个和最后一个有效节点
+        const cloneFirst = () => {
+          const first = cells[0];
+          return first ? createElement('li', {
+            staticClass: "weex-slider-cell weex-ct clone-cell",
+            key: 'clone-first'
+          }, [first.children || first.componentOptions.children]) : null
+        };
+        
+        const cloneLast = () => {
+          const last = cells[cells.length - 1];
+          return last ? createElement('li', {
+            staticClass: "weex-slider-cell weex-ct clone-cell",
+            key: 'clone-last'
+          }, [last.children || last.componentOptions.children]) : null
+        };
+        const lastClone = cloneLast();
+        const firstClone = cloneFirst();
+        
+        if (firstClone && lastClone) {
+          cells = [lastClone].concat(cells).concat([firstClone]);
+        }
+      }
       if (indicatorVnode) {
         indicatorVnode.data.attrs = indicatorVnode.data.attrs || {};
-        indicatorVnode.data.attrs.count = cells.length;
-        indicatorVnode.data.attrs.active = this.currentIndex;
+        indicatorVnode.data.attrs.count = cells.length - (this.infinite ? 2 : 0 ); // 显示实际数量
+        indicatorVnode.data.attrs.active = this.currentIndex - this.cloneIndex;
         this._indicator = indicatorVnode;
       }
       return cells
@@ -7549,55 +7580,77 @@ var slideMixin = {
       }
     },
 
-    _slideTo: function _slideTo (index, isTouchScroll) {
+    _slideTo: function _slideTo(index, isTouchScroll) {
       var this$1 = this;
-
+    
       if (this.frameCount <= 0) {
-        return
+        return;
       }
       if (!this.infinite || this.infinite === 'false') {
         if (index === -1 || index > (this.frameCount - 1)) {
           this._slideTo(this.currentIndex);
-          return
+          return;
         }
       }
       if (!this._preIndex && this._preIndex !== 0) {
-        if (this._showNodes && this._showNodes[0]) {
-          this._preIndex = this._showNodes[0].index;
-        }
-        else {
-          this._preIndex = 0;
-        }
+        this._preIndex = this.currentIndex || 0;
       }
-
+    
       if (this._sliding) {
-        return
+        return;
       }
       this._sliding = true;
-
+    
       var newIndex = this._normalizeIndex(index);
       var inner = this.$refs.inner;
       var step = this._step = this.frameCount <= 1 ? 0 : this._preIndex - index;
-
+    
       if (inner) {
         this._prepareNodes();
         var translate = weex.utils.getTransformObj(inner).translate;
         var match = translate && translate.match(/translate[^(]+\(([+-\d.]+)/);
-        var innerX = parseFloat(inner.style.left); //match && match[1] || 0;
-        var dist = innerX - this.innerOffset + step; // 点击的时候是没有滚动距离的会导致没有差值，所以这里需要使用上一个下标-下一个下标得到差值这样才能有变化然后进行滚动方向判断
+        var innerX = parseFloat(inner.style.left);
+        var dist = innerX - this.innerOffset + step;
         this.innerOffset += step * this._wrapperWidth;
-        // transform the whole slides group.
-         
-        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 (this.infinite && index >= this.frameCount - 1) {
+          // 先滑到克隆的 `第一张`
+          newIndex = this.frameCount - 1;
+          this.innerOffset = -newIndex * this._wrapperWidth;
+          inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+          inner.style.left = `${this.innerOffset}px`;
+          newIndex = 1; // 视觉上显示 `第一张`
+
+          // 等待动画完成后瞬间跳到 `第一张`
+          setTimeout(() => {
+            inner.style.transition = 'none'; 
+            this.innerOffset = -this._wrapperWidth; // 瞬间跳到 `第一张`
+            inner.style.left = `${this.innerOffset}px`;
+          }, TRANSITION_TIME);
+        } else if (this.infinite && index <= 0) {
+          // 先滑到克隆的 `最后一张`
+          newIndex = 0;
+          this.innerOffset = -newIndex * this._wrapperWidth;
+          inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+          inner.style.left = `${this.innerOffset}px`;
+          newIndex = this.frameCount - 2; // 视觉上显示 `最后一张`
+
+          // 等待动画完成后瞬间跳到 `最后一张`
+          setTimeout(() => {
+            inner.style.transition = 'none'; 
+            this.innerOffset = -(this.frameCount - 2) * this._wrapperWidth; // 瞬间跳到 `最后一张`
+            inner.style.left = `${this.innerOffset}px`;
+          }, TRANSITION_TIME);
+
+        } else {
+          // 正常切换
+          this.innerOffset = -newIndex * this._wrapperWidth;
+          inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+          inner.style.left = `${this.innerOffset}px`;
+        }
+    
+        // 触发事件
         if (!isTouchScroll) {
           this._emitScrollEvent('scrollstart');
         }
@@ -7606,40 +7659,42 @@ var slideMixin = {
             this$1._emitScrollEvent('scrollend');
           });
         }, THROTTLE_SCROLL_TIME);
-
+    
         this._loopShowNodes(step);
-
+    
         setTimeout(function () {
           if (this$1.isNeighbor) {
             this$1._setNeighbors();
           }
-
+    
           setTimeout(function () {
             inner.style.webkitTransition = '';
             inner.style.mozTransition = '';
             inner.style.transition = '';
             for (var i = this$1._showStartIdx; i <= this$1._showEndIdx; i++) {
               var node = this$1._showNodes[i];
-              if (!node) { continue }
+              if (!node) {continue;}
               var elm = node.firstElementChild;
-              if (!elm) { continue }
+              if (!elm) {continue;}
               elm.style.webkitTransition = '';
               elm.style.mozTransition = '';
               elm.style.transition = '';
             }
-            // clean cloned nodes and rearrange slide cells.
             this$1._rearrangeNodes(newIndex);
           }, NEIGHBOR_SCALE_TIME);
         }, TRANSITION_TIME);
       }
-
+    
       if (newIndex !== this._preIndex) {
         weex.utils.dispatchNativeEvent(this.$el, 'change', {
-          index: newIndex
+          index: newIndex - this.cloneIndex
         });
       }
+    
+      this.currentIndex = newIndex;
+      this._preIndex = newIndex;
     },
-
+    
     _clearNodesOffset: function _clearNodesOffset () {
       var this$1 = this;
 
@@ -7734,20 +7789,20 @@ var slideMixin = {
         node.index = idx;
         node._inShow = false;
         node.style.zIndex = 0;
-        node.style.opacity = 0;
+        // node.style.opacity = 0;
       });
     },
 
     _positionNodes: function _positionNodes (begin, end, step, anim) {
       var this$1 = this;
-
       var cells = this._cells;
       var start = step <= 0 ? begin : end;
       var stop = step <= 0 ? end : begin;
       var sign = step <= 0 ? -1 : 1;
       var cellIndex = this._preIndex + sign;
       for (var i = start; i !== stop - sign; i = i - sign) {
-        var node = cells[this$1._normalizeIndex(cellIndex)].elm;
+        var normalizedIndex = this$1._normalizeIndex(cellIndex);
+        var node = cells[normalizedIndex].elm;
         cellIndex = cellIndex - sign;
         this$1._positionNode(node, i);
       }
@@ -7757,26 +7812,7 @@ var slideMixin = {
      * index: position index in the showing cells' view.
      */
     _positionNode: function _positionNode (node, index) {
-      var holder = this._showNodes[index];
-      if (node._inShow && (holder !== node || holder._showIndex !== index)) {
-        if (holder && holder._isClone) { this._removeClone(holder); }
-        if( this.autoPlay ){ 
-          node = this._getClone(node.index);
-        }
-      }
-      else if (node._inShow) {  // holder === node
-        return
-      }
-
       node._inShow = true;
-      var translateX = index * this._wrapperWidth - this.innerOffset;
-      // 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;
       this._showNodes[index] = node;
@@ -7784,29 +7820,16 @@ var slideMixin = {
 
     _getClone: function _getClone (index) {
       var arr = this._clones[index] || (this._clones[index] = []);
-      var origNode = this._cells[index].elm;
+      var origNode = this._cells[index].elm; 
       var clone = origNode.cloneNode(true);
       clone._isClone = true;
       clone._inShow = true;
       // clone._inShow = origNode._inShow
       clone.index = origNode.index;
-      clone.style.opacity = 0;
       clone.style.zIndex = 0;
       this.$refs.inner.appendChild(clone);
       arr.push(clone);
       return clone
-      // try {
-      //   let arr = this._clones[index]
-      //   if (!arr) {
-      //     this._clones[index] = arr = []
-      //   }
-      //   if (arr.length <= 0) {
-
-      //   }
-      //   return arr.pop()
-      // } catch (err) {
-      //   console.error('this._cells -> ', this._cells)
-      // }
     },
 
     _removeClone: function _removeClone (node) {
@@ -7822,15 +7845,10 @@ var slideMixin = {
         // maybe cells has been updated and this clone node is already removed from the dom tree
         // throught _clearClones method.
       }
-      // const idx = node.index
-      // this._hideNode(node)
-      // const arr = this._clones[idx]
-      // arr.push(node)
     },
 
     _hideNode: function _hideNode (node) {
       node._inShow = false;
-      node.style.opacity = 0;
       node.style.zIndex = 0;
     },
 
@@ -7889,7 +7907,7 @@ var slideMixin = {
       }
       var origNode = origCell.elm;
       if (origNode._inShow) {
-        return
+        return// 原始节点已在显示区域，无需替换
       }
       var origShowIndex = origNode._showIndex;
       var styleProps = ['opacity', 'zIndex', 'left'];
@@ -7935,7 +7953,10 @@ var slideMixin = {
        */
       var shows = this._showNodes;
       for (var i = this._showStartIdx; i <= this._showEndIdx; i++) {
-        shows[i]._inShow = false;
+        const node = this._showNodes[i];
+        if (node) {
+          node._inShow = false; // 重置状态
+        }
       }
       for (var i$1 = -1; i$1 <= 1; i$1++) {
         var node = shows[i$1];
@@ -7990,11 +8011,6 @@ var slideMixin = {
           translateX = 0;
         }
         transObj.translate = "translate3d(" + translateX + "px, 0px, 0px)";
-
-        // ddd
-        // weex.utils.addTransform(elm, transObj);
-        // elm.style.left = translateX + 'px'
-
         elm.style.opacity = i === 0 ? MAIN_SLIDE_OPACITY : this$1.neighborAlpha;
       }
     },
@@ -8095,10 +8111,6 @@ var slideMixin = {
         this._emitScrollEvent('weex$scroll', {
           offsetXRatio: offsetX / this._wrapperWidth
         });
-        // 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'
       }
     },

package/package.json

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