@dolphinweex/weex-vue-render 0.2.60 → 0.2.62

package/.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "compile-hero.disable-compile-files-on-did-save-code": true
+  "compile-hero.disable-compile-files-on-did-save-code": true,
+  "liveServer.settings.port": 5501
 }

package/dist/index.common.js

@@ -3485,7 +3485,7 @@ function applySrc (item, src, placeholderSrc) {
     return /%[0-9A-Fa-f]{2}/.test(url);
   }
   
-  // 优化：如果是clone节点且原始图片已加载，直接复制背景图片
+  // 如果是clone节点且原始图片已加载，直接复制背景图片
   if (item._isClone && item._originalNode) {
     var originalBg = item._originalNode.style.backgroundImage;
     if (originalBg && originalBg !== 'none') {
@@ -8251,7 +8251,7 @@ var slideMixin = {
         this$1._clones[key] = [];
       });
       
-      // 优化：清理预加载的clone节点
+      // 清理预加载的clone节点
       if (this._preloadedClones) {
         Object.keys(this._preloadedClones).forEach(function (key) {
           var clone = this$1._preloadedClones[key];
@@ -8285,7 +8285,7 @@ var slideMixin = {
         // node.style.opacity = 0;
       });
       
-      // 优化：延迟预加载clone节点，避免阻塞初始化
+      // 延迟预加载clone节点，避免阻塞初始化
       setTimeout(function() {
         if (this$1.infinite && this$1.frameCount > 1) {
           this$1._preloadClones();
@@ -8347,7 +8347,7 @@ var slideMixin = {
       }
     },
 
-    // 优化：获取预加载的clone节点
+    // 获取预加载的clone节点
     _getPreloadedClone: function _getPreloadedClone (index) {
       var key = 'preloaded_' + index;
       var clone = this._preloadedClones && this._preloadedClones[key];
@@ -8361,7 +8361,7 @@ var slideMixin = {
       return null;
     },
 
-    // 优化：创建优化的clone节点，预设图片
+    // 创建优化的clone节点，预设图片
     _createOptimizedClone: function _createOptimizedClone (originalNode) {
       var cloneNode = originalNode.cloneNode(true);
       cloneNode._isClone = true;
@@ -8384,7 +8384,7 @@ var slideMixin = {
       return cloneNode;
     },
 
-    // 优化：预加载常用的clone节点
+    // 预加载常用的clone节点
     _preloadClones: function _preloadClones () {
       if (!this._preloadedClones) {
         this._preloadedClones = {};
@@ -8608,8 +8608,12 @@ var slideMixin = {
       }
       weex.weexSliderTouchStart = true
 
+      // 重置velocity相关变量
       this.lastMoveTime = Date.now();
       this.lastMovePosition = event.touches[0].pageX;
+      this.velocity = 0;
+      this.transitionDuration = 0.3;
+
       var touch = event.changedTouches[0];
       this._stopAutoPlay();
       var inner = this.$refs.inner;
@@ -8661,18 +8665,32 @@ var slideMixin = {
       tp.offsetY = offsetY;
 
       const now = Date.now();
-      const deltaTime = now - this.lastMoveTime;
-      const deltaX = Math.abs(event.touches[0].pageX - this.lastMovePosition);
-      if (deltaTime > 0) {
-        this.velocity = deltaX / deltaTime; // 像素/毫秒
-        // 计算动画时间，速度越大动画时间越短
-        const baseTime = TRANSITION_TIME / 1200; // 基准时间
-        const minTime = 0.1; // 最小动画时间（秒）
-        this.transitionDuration = Math.max(minTime, baseTime / (this.velocity + 1));
-      }
       
-      this.lastMoveTime = now;
-      this.lastMovePosition = event.touches[0].pageX;
+      // 初始化velocity相关变量
+      if (!this.lastMoveTime) {
+        this.lastMoveTime = now;
+        this.lastMovePosition = event.touches[0].pageX;
+        this.velocity = 0;
+        this.transitionDuration = 0.3;
+      } else {
+        const deltaTime = now - this.lastMoveTime;
+        const deltaX = Math.abs(event.touches[0].pageX - this.lastMovePosition);
+        
+        if (deltaTime > 0 && deltaTime < 100) { // 限制deltaTime范围，避免异常值
+          // 使用滑动平均来平滑velocity计算
+          const currentVelocity = deltaX / deltaTime;
+          this.velocity = this.velocity ? (this.velocity * 0.7 + currentVelocity * 0.3) : currentVelocity;
+          
+          // 计算动画时间，速度越大动画时间越短
+          const baseTime = TRANSITION_TIME / 1200; // 基准时间
+          const minTime = 0.15; // 最小动画时间（秒）
+          const maxTime = 0.5;  // 最大动画时间（秒）
+          this.transitionDuration = Math.max(minTime, Math.min(maxTime, baseTime / (this.velocity + 0.5)));
+        }
+        
+        this.lastMoveTime = now;
+        this.lastMovePosition = event.touches[0].pageX;
+      }
       var isV = tp.isVertical;
       if (typeof isV === 'undefined') {
         isV = tp.isVertical = Math.abs(offsetX) < Math.abs(offsetY);
@@ -8690,10 +8708,12 @@ var slideMixin = {
       const isRightSwipe = offsetX > 0;
       const atFirst = this._preIndex === 0;
       const atLast = this._preIndex === this.frameCount - 1;
+      //修改 非无缝衔接嵌套轮播图的时候 到边界能够触发外层的轮播图滚动
       if (!this.infinite && !this.autoPlay && ((atLast && isLeftSwipe) || (atFirst && isRightSwipe)) && !weex.weexSliderTouchBoundary) {
         weex.weexSliderTouchBoundary = true
-        this._parentNav._touchParams = ref
-        //如果是边界并继续滑动
+        delete this._touchParams
+        this._parentNav._handleTouchStart(event)
+        this._parentNav._handleTouchMove(event)
         return
       }
 
@@ -8733,13 +8753,13 @@ var slideMixin = {
   
       var inner = this.$refs.inner;
       // 如果已经有一个激活的slider，则不再处理其他slider
-      if (touchSliderInstance && touchSliderInstance != inner) {
-        event.stopPropagation();
-        return;
-      }
+      // if (touchSliderInstance && touchSliderInstance != inner) {
+      //   event.stopPropagation();
+      //   return;
+      // }
   
-      // horizontal scroll. trigger scroll event.
-      event.stopPropagation()
+      // // horizontal scroll. trigger scroll event.
+      // event.stopPropagation()
   
       touchSliderInstance = inner;
   
@@ -8789,16 +8809,213 @@ var slideMixin = {
       var offsetX = tp.offsetX;
       if (inner) {
         this._nodesOffsetCleared = false;
-        // TODO: test the velocity if it's less than 0.2.
-        var reset = Math.abs(offsetX / this._wrapperWidth) < 0.2;
+        
+        // 计算滑动距离比例和方向
+        var moveRatio = offsetX / this._wrapperWidth;
+        var absMoveRatio = Math.abs(moveRatio);
         var direction = offsetX > 0 ? 1 : -1;
-        var newIndex = reset ? this.currentIndex : (this.currentIndex - direction);
-        this._slideTo(newIndex, true ,this.transitionDuration);
+        
+        // 结合距离和速度
+        var shouldSwitch = false;
+        var animationDuration = this.transitionDuration || 0.3;
+        
+        // 如果滑动距离超过30%，或者速度够快（大于0.5像素/毫秒），则切换
+        if (absMoveRatio > 0.3 || (this.velocity && this.velocity > 0.5 && absMoveRatio > 0.15)) {
+          shouldSwitch = true;
+          // 根据速度调整动画时间，速度越快动画越短
+          if (this.velocity && this.velocity > 0.3) {
+            animationDuration = Math.max(0.15, Math.min(0.4, 0.4 / this.velocity));
+          }
+        }
+        
+        var newIndex = shouldSwitch ? (this.currentIndex - direction) : this.currentIndex;
+        
+        // 边界检查
+        if (!this.infinite || this.infinite === 'false') {
+          if (newIndex < 0) newIndex = 0;
+          if (newIndex >= this.frameCount) newIndex = this.frameCount - 1;
+        }
+        
+        // 如果是复位操作（没有切换页面），使用更平滑的动画
+        if (newIndex === this.currentIndex) {
+          this._smoothResetPosition(inner, animationDuration);
+        } else {
+          this._smoothSlideTo(newIndex, animationDuration, moveRatio);
+        }
       }
       delete this._touchParams;
+      
+      // 清理velocity相关变量
+      this.lastMoveTime = null;
+      this.lastMovePosition = null;
+      this.velocity = 0;
+      
       weex.sliderHorizontalScrolling = false;
     },
 
+    // 平滑复位到当前位置
+    _smoothResetPosition: function _smoothResetPosition(inner, duration) {
+      var targetOffset = this.innerOffset;
+      var currentOffset = this._getPosition(inner);
+      
+      if (Math.abs(currentOffset - targetOffset) < 1) {
+        return; // 位置已经很接近，无需动画
+      }
+      
+      // 使用ease-out缓动函数进行平滑复位
+      var transitionStyle = this.isTransform ? 
+        `transform ${duration}s cubic-bezier(0.25, 0.46, 0.45, 0.94)` : 
+        `left ${duration}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
+      
+      inner.style.transition = transitionStyle;
+      this._setPosition(inner, targetOffset);
+      
+      // 清除transition
+      setTimeout(() => {
+        inner.style.transition = '';
+      }, duration * 1000);
+    },
+
+     // 平滑切换到目标页面
+     _smoothSlideTo: function _smoothSlideTo(newIndex, duration, moveRatio) {
+       var this$1 = this;
+       
+       if (this.frameCount <= 0) return;
+       if (this.frameCount <= 1) {
+         this.currentIndex = 0;
+         this._preIndex = 0;
+         return;
+       }
+       
+       // 边界处理
+       if (!this.infinite || this.infinite === 'false') {
+         if (newIndex < 0 || newIndex >= this.frameCount) {
+           this._smoothResetPosition(this.$refs.inner, duration);
+           return;
+         }
+       }
+       
+       if (this._sliding) return;
+       this._sliding = true;
+       
+       var inner = this.$refs.inner;
+       if (!inner) return;
+       
+       var originalIndex = newIndex;
+       var currentOffset = this._getPosition(inner);
+       var targetOffset;
+       var needsReset = false;
+       var cloneNode = null;
+       var lastNode = null;
+       
+       // 使用更自然的缓动函数
+       var easing = Math.abs(moveRatio) > 0.4 ? 
+         'cubic-bezier(0.25, 0.46, 0.45, 0.94)' :  // 更快的切换
+         'cubic-bezier(0.4, 0.0, 0.2, 1)';          // 更柔和的复位
+       
+       var transitionStyle = this.isTransform ? 
+         `transform ${duration}s ${easing}` : 
+         `left ${duration}s ${easing}`;
+       
+       // 处理无限轮播的边界情况
+       if (this.infinite && this.infinite !== 'false') {
+         if (newIndex < 0) {
+           // 从第一张向右滑到最后一张
+           newIndex = this.frameCount - 1;
+           lastNode = this._cells[newIndex].elm;
+           lastNode.style.position = 'absolute';
+           this._setPosition(lastNode, -this._wrapperWidth);
+           lastNode.style.opacity = '1';
+           lastNode.style.zIndex = '10';
+           
+           // 目标是向右滑动到左侧的最后一张图片
+           targetOffset = this.innerOffset + this._wrapperWidth;
+           needsReset = true;
+         } else if (newIndex >= this.frameCount) {
+           // 从最后一张向左滑到第一张
+           newIndex = 0;
+           var firstNode = this._cells[0].elm;
+           cloneNode = this._getPreloadedClone(0) || this._createOptimizedClone(firstNode);
+           cloneNode.style.position = 'absolute';
+           this._setPosition(cloneNode, this.frameCount * this._wrapperWidth);
+           cloneNode.style.width = `${this._wrapperWidth}px`;
+           cloneNode.style.zIndex = '10';
+           if (!cloneNode.parentNode) {
+             inner.appendChild(cloneNode);
+           }
+           
+           // 目标是向左滑动到右侧的克隆图片
+           targetOffset = this.innerOffset - this._wrapperWidth;
+           needsReset = true;
+         } else {
+           // 正常切换
+           targetOffset = -newIndex * this._wrapperWidth;
+         }
+       } else {
+         // 非无限轮播的正常切换
+         targetOffset = -newIndex * this._wrapperWidth;
+       }
+       
+       // 执行动画
+       inner.style.transition = transitionStyle;
+       this._setPosition(inner, targetOffset);
+       
+       // 触发滚动事件
+       this._emitScrollEvent('scrollstart');
+       // 添加持续的滚动事件触发
+       var step = this._step = this.frameCount <= 1 ? 0 : this._preIndex - newIndex;
+
+       var dist = currentOffset - this.innerOffset + step;
+       setTimeout(() => {
+         this$1._throttleEmitScroll(dist, () => {
+           this$1._emitScrollEvent('scrollend');
+         });
+       }, THROTTLE_SCROLL_TIME);
+       // 动画完成后的处理
+       setTimeout(() => {
+         inner.style.transition = 'none';
+         
+         if (needsReset) {
+           // 无缝轮播需要重置位置
+           if (lastNode) {
+             // 重置最后一张图片位置
+             lastNode.style.position = '';
+             lastNode.style.zIndex = '';
+             this$1._setPosition(lastNode, 0);
+           }
+           
+           if (cloneNode && cloneNode.parentNode) {
+             // 移除克隆节点
+             inner.removeChild(cloneNode);
+           }
+           
+           // 重置到正确的最终位置
+           this$1.innerOffset = -newIndex * this$1._wrapperWidth;
+           this$1._setPosition(inner, this$1.innerOffset);
+           
+           // 短暂延迟后恢复transition
+           setTimeout(() => {
+             inner.style.transition = '';
+           }, 50);
+         } else {
+           this$1.innerOffset = targetOffset;
+         }
+         
+         this$1._sliding = false;
+         
+         // 触发change事件 - 在设置currentIndex之前比较
+         if (newIndex !== this$1._preIndex) {
+           weex.utils.dispatchNativeEvent(this$1.$el, 'change', {
+             index: newIndex
+           });
+         }
+         
+         this$1.currentIndex = newIndex;
+         this$1._preIndex = newIndex;
+         this$1._emitScrollEvent('scrollend');
+       }, duration * 800);
+     },
+
     _handleTouchCancel: function _handleTouchCancel (event) {
       var inner = this.$refs.inner;
       if (touchSliderInstance == inner) {

package/package.json

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