@dolphinweex/weex-vue-render 0.2.27 → 0.2.28

package/dist/index.common.js

@@ -5930,7 +5930,7 @@ var scrollable$1 = {
           this._loadmoreReset = false;
           var el = this.$el;
           if (el) {
-            weex.utils.dispatchNativeEvent(el, 'loadmore');
+            weex.utils.dispatchNativeEvent(el, 'loading');
           }
         }
       }
@@ -7443,7 +7443,6 @@ var slideMixin = {
     this._clones = [];
     this.innerOffset = 0;
     this._indicator = null;
-    this.cloneIndex =  0 //需要减或者加去克隆下标
   },
 
   beforeUpdate: function beforeUpdate () {
@@ -7499,7 +7498,7 @@ var slideMixin = {
 
   mounted: function mounted () {
     this._getWrapperSize();
-    this._slideTo(this.currentIndex + this.cloneIndex);
+    this._slideTo(this.currentIndex);
     weex.utils.fireLazyload(this.$el, true);
   },
 
@@ -7532,34 +7531,11 @@ var slideMixin = {
         }, [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 - (this.infinite ? 2 : 0 ); // 显示实际数量
-        indicatorVnode.data.attrs.active = this.currentIndex - this.cloneIndex;
+        indicatorVnode.data.attrs.active = this.currentIndex ;
         this._indicator = indicatorVnode;
       }
       return cells
@@ -7568,7 +7544,6 @@ var slideMixin = {
     _renderSlides: function _renderSlides (createElement) {
       this._cells = this._formatChildren(createElement);
       this.frameCount = this._cells.length;
-      this.cloneIndex = this.frameCount > 1 ? Boolean(this.infinite) : 0 //需要减或者加去克隆下标
       return createElement(
         'nav',
         {
@@ -7625,12 +7600,20 @@ var slideMixin = {
       if (this.frameCount <= 0) {
         return;
       }
+      //一张图片无需滚动操作
+      if (this.frameCount <= 1) {
+        this.currentIndex = 0;
+        this._preIndex = 0;
+        return;
+      }
+      // 非无限轮播的边界处理
       if (!this.infinite || this.infinite === 'false') {
         if (index === -1 || index > (this.frameCount - 1)) {
           this._slideTo(this.currentIndex);
           return;
         }
       }
+
       if (!this._preIndex && this._preIndex !== 0) {
         this._preIndex = this.currentIndex || 0;
       }
@@ -7640,98 +7623,163 @@ var slideMixin = {
       }
       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);
+        var innerX = parseFloat(inner.style.left) || 0;
         var dist = innerX - this.innerOffset + step;
-        this.innerOffset += step * this._wrapperWidth;
     
-        // 克隆处理：先执行正常动画到克隆的最后一张，再瞬间跳回真实的第一张
-        if (this.cloneIndex && this.infinite && index >= this.frameCount - 1) {
-          // 先滑到克隆的 `第一张`
-          newIndex = this.frameCount - 1;
-          this.innerOffset = -newIndex * this._wrapperWidth;
+        // 处理无限轮播的边界情况 将目标元素先定位到目的地 动画结束后再回归原位
+        if (this.infinite && this.infinite !== 'false') {
+          if (index < 0) {
+            // 从第一张向左滑
+            var lastIndex = this.frameCount - 1;
+
+            // 先将最后一张放到左侧
+            var lastNode = this._cells[lastIndex].elm;
+            lastNode.style.position = 'absolute';
+            lastNode.style.left = `-${this._wrapperWidth}px`;
+            lastNode.style.opacity = '1';
+            lastNode.style.zIndex = '10';
+            // 执行向左滑动动画
           inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+            this.innerOffset += this._wrapperWidth;
           inner.style.left = `${this.innerOffset}px`;
-          newIndex = 1; // 视觉上显示 `第一张`
 
-          // 等待动画完成后瞬间跳到 `第一张`
+            // 动画结束后第一张在充值回原先位置
           setTimeout(() => {
             inner.style.transition = 'none'; 
-            this.innerOffset = -this._wrapperWidth; // 瞬间跳到 `第一张`
+              lastNode.style.position = '';
+              lastNode.style.left = '';
+              this.innerOffset = -lastIndex * this._wrapperWidth;
             inner.style.left = `${this.innerOffset}px`;
+
+              setTimeout(() => {
+                inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+              }, 50);
           }, TRANSITION_TIME);
-        } else if (this.cloneIndex && this.infinite && index <= 0) {
-          // 先滑到克隆的 `最后一张`
-          newIndex = 0;
-          this.innerOffset = -newIndex * this._wrapperWidth;
+
+            index = lastIndex;
+          } else if (index >= this.frameCount) {
+            // 从最后一张向右滑
+            // 克隆第一张图片并放置在适当位置
+            var firstNode = this._cells[0].elm;
+            var cloneNode = firstNode.cloneNode(true);
+            cloneNode.style.position = 'absolute';
+            cloneNode.style.left = `${this.frameCount * this._wrapperWidth}px`;
+            cloneNode.style.width = `${this._wrapperWidth}px`;
+            cloneNode.style.zIndex = '10';
+            inner.appendChild(cloneNode);
+
+            // 执行向右滑动动画
           inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+            this.innerOffset -= this._wrapperWidth;
           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`;
+
+              // 移除克隆节点
+              if (cloneNode.parentNode) {
+                inner.removeChild(cloneNode);
+              }
+
+              // 重置位置到第一张
+              this.innerOffset = 0;
+              inner.style.left = '0px';
+
+              // 短暂延迟后恢复过渡效果
+              setTimeout(() => {
+                inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+              }, 50);
           }, TRANSITION_TIME);
 
+            index = 0;
         } else {
           // 正常切换
-          this.innerOffset = -newIndex * this._wrapperWidth;
+            this.innerOffset = -index * this._wrapperWidth;
+            inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
+            inner.style.left = `${this.innerOffset}px`;
+          }
+        } else {
+          // 非无限轮播的正常切换
+          this.innerOffset = -index * this._wrapperWidth;
           inner.style.transition = `left ${TRANSITION_TIME / 1000}s ease-in-out`;
           inner.style.left = `${this.innerOffset}px`;
         }
     
-        // 触发事件
+        // 触发滚动事件
         if (!isTouchScroll) {
           this._emitScrollEvent('scrollstart');
         }
-        setTimeout(function () {
-          this$1._throttleEmitScroll(dist, function () {
+
+        setTimeout(() => {
+          this$1._throttleEmitScroll(dist, () => {
             this$1._emitScrollEvent('scrollend');
           });
         }, THROTTLE_SCROLL_TIME);
     
         this._loopShowNodes(step);
     
-        setTimeout(function () {
+        setTimeout(() => {
           if (this$1.isNeighbor) {
             this$1._setNeighbors();
           }
     
-          setTimeout(function () {
-            inner.style.webkitTransition = '';
-            inner.style.mozTransition = '';
+          setTimeout(() => {
             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;}
-              elm.style.webkitTransition = '';
-              elm.style.mozTransition = '';
+              if (!elm) continue;
               elm.style.transition = '';
             }
-            this$1._rearrangeNodes(newIndex);
+            this$1._rearrangeNodes(index);
           }, NEIGHBOR_SCALE_TIME);
         }, TRANSITION_TIME);
       }
     
-      if (newIndex !== this._preIndex) {
+      if (index !== this._preIndex) {
         weex.utils.dispatchNativeEvent(this.$el, 'change', {
-          index: newIndex - this.cloneIndex
+          index: index
         });
       }
+
+      this.currentIndex = index;
+      this._preIndex = index;
+    },
+    // 优化_prepareNodes方法以支持无缝切换
+    _prepareNodes: function _prepareNodes() {
+      var step = this._step;
+      if (!this._inited) {
+        this._initNodes();
+        this._inited = true;
+        this._showNodes = {};
+      }
     
-      this.currentIndex = newIndex;
-      this._preIndex = newIndex;
+      if (this.frameCount <= 1) {
+        this._showStartIdx = this._showEndIdx = 0;
+        var node = this._cells[0].elm;
+        node.style.opacity = 1;
+        node.index = 0;
+        this._showNodes[0] = node;
+        node._inShow = true;
+        node._showIndex = 0;
+        return;
+      }
+    
+      // 计算需要显示的节点范围，确保边界切换时有足够的节点
+      var showCount = this._showCount = Math.abs(step) + 3;
+      this._showStartIdx = step <= 0 ? -1 : 2 - showCount;
+      this._showEndIdx = step <= 0 ? showCount - 2 : 1;
+    
+      this._clearNodesOffset();
+      this._positionNodes(this._showStartIdx, this._showEndIdx, step);
     },
     
     _clearNodesOffset: function _clearNodesOffset () {
@@ -7769,31 +7817,32 @@ var slideMixin = {
       this._showEndIdx += step;
     },
 
-    _prepareNodes: function _prepareNodes () {
-      // test if the next slide towards the direction exists.
-      // e.g. currentIndex 0 -> 1: should prepare 4 slides: -1, 0, 1, 2
-      // if not, translate a node to here, or just clone it.
+    _prepareNodes: function _prepareNodes() {
       var step = this._step;
       if (!this._inited) {
         this._initNodes();
         this._inited = true;
         this._showNodes = {};
       }
+    
+      // 单张图片特殊处理
       if (this.frameCount <= 1) {
         this._showStartIdx = this._showEndIdx = 0;
         var node = this._cells[0].elm;
         node.style.opacity = 1;
-        // node.style.zIndex = 99;
         node.index = 0;
         this._showNodes[0] = node;
         node._inShow = true;
         node._showIndex = 0;
-        return
+        return;
       }
 
+      // 计算需要显示的节点范围
       var showCount = this._showCount = Math.abs(step) + 3;
       this._showStartIdx = step <= 0 ? -1 : 2 - showCount;
       this._showEndIdx = step <= 0 ? showCount - 2 : 1;
+    
+      // 清理并更新节点位置
       this._clearNodesOffset();
       this._positionNodes(this._showStartIdx, this._showEndIdx, step);
     },
@@ -8116,7 +8165,43 @@ var slideMixin = {
       if (isV) {
         return
       }
-
+      // 判断是否到达边界，决定是否放行事件
+      const isLeftSwipe = offsetX < 0;
+      const isRightSwipe = offsetX > 0;
+      const atFirst = this._preIndex === 0;
+      const atLast = this._preIndex === this.frameCount - 1;
+      //修改自动轮播或者无缝轮播边界滚动的过渡动画
+      if (this.infinite && this.infinite !== 'false') {
+        var inner = this.$refs.inner;
+        if (inner && ((atFirst && isRightSwipe) || (atLast && isLeftSwipe))) {
+          if (!tp.boundaryHandled) {
+            tp.boundaryHandled = true;
+            if (atFirst && isRightSwipe) {
+              // 从第一张向右滑到最后一张
+              var lastIndex = this.frameCount - 1;
+              var lastNode = this._cells[lastIndex].elm;
+              lastNode.style.position = 'absolute';
+              lastNode.style.left = `-${this._wrapperWidth}px`;
+              lastNode.style.opacity = '1';
+              lastNode.style.zIndex = '10';
+            } else if (atLast && isLeftSwipe) {
+              // 从最后一张向左滑到第一张
+              var firstNode = this._cells[0].elm;
+              var cloneNode = firstNode.cloneNode(true);
+              cloneNode.style.position = 'absolute';
+              cloneNode.style.left = `${this.frameCount * this._wrapperWidth}px`;
+              cloneNode.style.width = `${this._wrapperWidth}px`;
+              cloneNode.style.zIndex = '10';
+              inner.appendChild(cloneNode);
+              tp.cloneNode = cloneNode;
+            }
+          }
+        }
+      }
+      if (!this.infinite && !this.autoPlay && ((atLast && isLeftSwipe) || (atFirst && isRightSwipe))) {
+        // ✅ 如果是边界并继续滑动，就放手，不拦截
+        return;
+      }
       if (this._sliding) {
         event.stopPropagation();
         return
@@ -8134,7 +8219,7 @@ var slideMixin = {
 
       touchSliderInstance = inner;
 
-      if (!this.autoPlay) {
+      if (!this.autoPlay && !this.infinite) {
         // 如果不是自动播放，则当滚动到最后一页时，offsetX不能 < 0
         // 如果不是自动播放，则当滚动到第一页时，offsetX不能 > 0
         if (this._preIndex == this.frameCount - 1) {
@@ -10041,49 +10126,49 @@ function detectEvents () {
 detectEvents();
 
 function transitionOnce (vnode, config, callback) {
-  var nextFrame = utils$2.nextFrame;
-  var toCSSText = utils$2.toCSSText;
-  var styleObject2rem = utils$2.styleObject2rem;
-  var isArray = utils$2.isArray;
+    var nextFrame = utils$2.nextFrame;
+    var toCSSText = utils$2.toCSSText;
+    var styleObject2rem = utils$2.styleObject2rem;
+    var isArray = utils$2.isArray;
 
-  if (isArray(vnode)) {
-    vnode = vnode[0];
-  }
+    if (isArray(vnode)) {
+      vnode = vnode[0];
+    }
 
-  var duration = config.duration || 0; // ms
-  var timing = config.timingFunction || 'linear';
-  var delay = config.delay || 0;  // ms
+    var duration = config.duration || 100; // ms
+    var timing = config.timingFunction || 'linear';
+    var delay = config.delay || 0;  // ms
 
-  // TODO: parse transition properties
-  var transitionValue = "all " + duration + "ms " + timing + " " + delay + "ms";
+    // TODO: parse transition properties
+    var transitionValue = "all " + duration + "ms " + timing + " " + delay + "ms";
 
-  var dom = vnode instanceof HTMLElement ? vnode : vnode.$el;
-  // trigger image lazyloading by force.
-  dom && weex.utils.fireLazyload(dom, true);
+    var dom = vnode instanceof HTMLElement ? vnode : vnode.$el;
+    // trigger image lazyloading by force.
+    dom && weex.utils.fireLazyload(dom, true);
 
-  var transitionEndHandler = function (event) {
-    event && event.stopPropagation();
+    var transitionEndHandler = function (event) {
+      event && event.stopPropagation();
+      if (endEvent) {
+        dom.removeEventListener(endEvent, transitionEndHandler);
+        dom.style[styleName] = '';
+      }
+      setTimeout(()=>{
+        callback(); //解决嵌套animation的时候 duration过小时会出现瞬间执行完毕的问题
+      })
+    };
     if (endEvent) {
-      dom.removeEventListener(endEvent, transitionEndHandler);
-      dom.style[styleName] = '';
-    }
-    setTimeout(()=>{
-      callback(); //解决嵌套animation的时候 duration过小时会出现瞬间执行完毕的问题
-    })
-  };
-  if (endEvent) {
-    dom.style[styleName] = transitionValue;
-    dom.addEventListener(endEvent, transitionEndHandler);
-  }
-  nextFrame(function () {
-    // 修改 transform：translate让它支持传3个参数，且第三个参数无效
-    if (config.styles["transform"]) {
-      config.styles["transform"] = config.styles["transform"].replace(/(translate\([^,]+,[^,]+),[^)]+\)/, '$1)')
+      dom.style[styleName] = transitionValue;
+        dom.addEventListener(endEvent, transitionEndHandler);
     }
+    nextFrame(function () {
+      // 修改 transform：translate让它支持传3个参数，且第三个参数无效
+      if (config.styles["transform"]) {
+        config.styles["transform"] = config.styles["transform"].replace(/(translate\([^,]+,[^,]+),[^)]+\)/, '$1)')
+      }
 
-    dom.style.cssText
-      += toCSSText(styleObject2rem(config.styles, DESIGN_ROOT_VALUE) || {});
-  });
+      dom.style.cssText
+        += toCSSText(styleObject2rem(config.styles, DESIGN_ROOT_VALUE) || {});
+    });
 }
 
 var animation = {

package/package.json

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