@dolphinweex/weex-harmony 0.1.33 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolphinweex/weex-harmony",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "weex harmony adapter",
   "main": "index.js",
   "files": [

package/src/components/midea-scene-card-drag-list-view.vue

@@ -48,7 +48,7 @@
               :style="applyNormalAttribute(item.itemView)"
               class="grid-box"
               :class="{ shaking: data.isEditing }"
-              @click.stop="(e) => itemViewClick(e, item, index)"
+              @click.stop.prevent="(e) => itemViewClick(e, item, index)"
             >
               <div class="flexBox">
                 <img
@@ -167,13 +167,11 @@ export default {
   },
   data() {
     return {
-      isNotUpdated: true,
       targetTouchX: 0,
       targetTouchY: 0,
       selected: null,
       longPressTimer: null,
       longPressDuration: 350,
-      longPressStartIndex: null,
       draggingIndex: null,
       hoverIndex: null,
       isTouchDragging: false,
@@ -285,12 +283,6 @@ export default {
       const animKey = `${type}-${itemId}`;
       const refName = `${type}Anim-${itemId}`;
 
-      // 销毁旧动画
-      if (this.lottieAnimations[animKey]) {
-        this.lottieAnimations[animKey].destroy();
-        delete this.lottieAnimations[animKey];
-      }
-
       // 检查DOM元素是否存在
       const animEl = this.$refs[refName];
       if (!animEl || !animEl[0] || !animView.animUrl) {
@@ -305,6 +297,36 @@ export default {
         return;
       }
 
+      // 如果是bg或front动画，需要检查并清理另一个
+      if (type === 'bg' || type === 'front') {
+        const otherType = type === 'bg' ? 'front' : 'bg';
+        const otherAnimKey = `${otherType}-${itemId}`;
+
+        // 如果另一个动画正在运行，先销毁它
+        if (this.lottieAnimations[otherAnimKey]) {
+          this.lottieAnimations[otherAnimKey].destroy();
+          delete this.lottieAnimations[otherAnimKey];
+
+          // 清空对应的animUrl数据
+          const index = this.data.list.findIndex(
+            (i) => i.itemView.id == itemId
+          );
+          if (index !== -1) {
+            this.$set(
+              this.data.list[index][`${otherType}AnimView`],
+              'animUrl',
+              ''
+            );
+          }
+        }
+      }
+
+      // 销毁当前类型的旧动画
+      if (this.lottieAnimations[animKey]) {
+        this.lottieAnimations[animKey].destroy();
+        delete this.lottieAnimations[animKey];
+      }
+
       try {
         const anim = lottie.loadAnimation({
           container: animEl[0],
@@ -374,8 +396,8 @@ export default {
       if (item.selectIcon.visibility) {
         item.itemView.isSelected = !item.itemView.isSelected;
       }
-      e.preventDefault();
-      e.stopPropagation();
+      e && e.preventDefault();
+      e && e.stopPropagation();
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -595,7 +617,6 @@ export default {
         return;
       }
       this.$emit('onDragEventStart', e);
-
       // 只在编辑模式下阻止事件冒泡和默认行为
       this.cancelLongPress();
       // 记录起始触摸位置和索引
@@ -603,7 +624,6 @@ export default {
       this.touchStartX = touch.pageX;
       this.touchStartY = touch.pageY;
       console.log('开始长按ddddddddd', touch, touch.pageY, touch.pageX);
-      this.longPressStartIndex = index;
       this.isScrolling = false; // 重置滚动状态
 
       // 设置新的长按计时器
@@ -663,7 +683,7 @@ export default {
     activateDragMode(index) {
       console.log('长按触发，进入编辑模式');
       // 进入编辑模式
-
+      
       if (this.data.isEditing) {
         // 设置当前拖拽索引
         this.draggingIndex = index;
@@ -679,18 +699,22 @@ export default {
         const element = document.querySelectorAll('.grid-item')[index];
         if (element) {
           const rect = element.getBoundingClientRect();
-          // 计算触摸点相对于元素左上角的偏移
+          const containerRect = this.$el.getBoundingClientRect();
+          
+          // 计算相对于父容器的偏移
           this.touchOffsetX = this.touchStartX - rect.left;
           this.touchOffsetY = this.touchStartY - rect.top;
 
-          // 设置克隆元素的初始位置
-          this.dragCloneX = rect.left;
-          this.dragCloneY = rect.top;
+          // 设置克隆元素的初始位置（相对于父容器）
+          this.dragCloneX = rect.left - containerRect.left;
+          this.dragCloneY = rect.top - containerRect.top;
           this.isDragClone = true;
 
           requestAnimationFrame(() => {
-            this.dragCloneX = this.touchStartX - this.touchOffsetX;
-            this.dragCloneY = this.touchStartY - this.touchOffsetY;
+            const relativeX = this.touchStartX - containerRect.left - this.touchOffsetX;
+            const relativeY = this.touchStartY - containerRect.top - this.touchOffsetY;
+            this.dragCloneX = relativeX;
+            this.dragCloneY = relativeY;
           });
 
           console.log('拖拽克隆已创建');
@@ -699,6 +723,9 @@ export default {
       this.data.isEditing = true;
       this.$emit('onEditStateChanged', true);
       this.longPressTimer = null;
+      setTimeout(()=>{
+        this.selectIconClick(null, this.data.list[index], index)
+      },100)
     },
 
     // 取消长按计时器
@@ -707,14 +734,12 @@ export default {
         clearTimeout(this.longPressTimer);
         this.longPressTimer = null;
       }
-      this.longPressStartIndex = null;
     },
 
     // 触摸移动处理
     onTouchMove(e) {
       if (!this.isTouchDragging) return;
 
-      // 确保在拖拽模式下阻止所有事件传播
       if (this.isTouchDragging && this.data.isEditing) {
         if (e.oriEvent) {
           e.oriEvent.preventDefault();
@@ -724,17 +749,16 @@ export default {
       }
 
       const touch = e.changedTouches[0];
+      const containerRect = this.$el.getBoundingClientRect();
 
-      // 更新目标位置而非直接设置
-      this.targetTouchX = touch.pageX;
-      this.targetTouchY = touch.pageY;
+      // 更新目标位置（相对于父容器）
+      this.targetTouchX = touch.pageX - containerRect.left;
+      this.targetTouchY = touch.pageY - containerRect.top;
 
-      // 启动平滑动画（如果尚未启动）
       if (!this.animationFrameId) {
         this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
       }
 
-      // 简化的交换逻辑
       this.handleSwapLogic(touch.pageX, touch.pageY);
     },
 
@@ -792,21 +816,16 @@ export default {
 
     // 平滑更新拖拽位置的方法
     updateDragPosition() {
-      const easing = 0.6; // 增加缓动系数，让拖拽更跟手
-      this.dragCloneX +=
-        (this.targetTouchX - this.touchOffsetX - this.dragCloneX) * easing;
-      this.dragCloneY +=
-        (this.targetTouchY - this.touchOffsetY - this.dragCloneY) * easing;
-      if (
-        Math.abs(this.dragCloneX - (this.targetTouchX - this.touchOffsetX)) <
-        0.5
-      )
-        this.dragCloneX = this.targetTouchX - this.touchOffsetX;
-      if (
-        Math.abs(this.dragCloneY - (this.targetTouchY - this.touchOffsetY)) <
-        0.5
-      )
-        this.dragCloneY = this.targetTouchY - this.touchOffsetY;
+      const easing = 0.6;
+      const targetX = this.targetTouchX - this.touchOffsetX;
+      const targetY = this.targetTouchY - this.touchOffsetY;
+
+      this.dragCloneX += (targetX - this.dragCloneX) * easing;
+      this.dragCloneY += (targetY - this.dragCloneY) * easing;
+
+      if (Math.abs(this.dragCloneX - targetX) < 0.5) this.dragCloneX = targetX;
+      if (Math.abs(this.dragCloneY - targetY) < 0.5) this.dragCloneY = targetY;
+
       this.animationFrameId = requestAnimationFrame(this.updateDragPosition);
     },
 
@@ -827,7 +846,11 @@ export default {
         this.isTouchDragging = false;
         this.isDragClone = false;
         this.hoverIndex = null;
-        this.draggingIndex = null;
+
+        // 使用延时来重置拖拽索引，避免与点击事件冲突
+        setTimeout(() => {
+          this.draggingIndex = null;
+        }, 100);
       }
     },
 
@@ -940,10 +963,10 @@ export default {
   watch: {
     'data.isEditing': {
       handler(newVal) {
-        this.isNotUpdated = newVal
-        if (!newVal) {
-          this.$set(this.data, 'list', this.data.list);
-        }
+        this.generateDataList();
+        this.$nextTick(() => {
+          this.initLottieAnimations();
+        });
       },
       deep: true,
     },
@@ -954,12 +977,13 @@ export default {
         if (this.isProcessingData) {
           return;
         }
-
-        console.log('检测到data.list变化');
-        this.generateDataList();
-        this.$nextTick(() => {
-          this.initLottieAnimations();
-        });
+        if (newList.length !== oldList.length) {
+          console.log('检测到data.list变化');
+          this.generateDataList();
+          this.$nextTick(() => {
+            this.initLottieAnimations();
+          });
+        }
       },
       deep: true,
     },
@@ -974,9 +998,6 @@ export default {
     // 初始化Lottie动画
     this.initLottieAnimations();
   },
-  updated(){
-    if(this.isNotUpdated){return}
-  },
   beforeDestroy() {
     // 确保清理所有事件监听器
     this.cancelLongPress();
@@ -997,17 +1018,21 @@ export default {
 button {
   border: none;
 }
+
 .disabled-item {
   opacity: 0.6;
   pointer-events: none;
 }
+
 .outer-container {
   width: 100%;
   position: relative;
+  transform-style: preserve-3d;
 }
 
 .items-container {
   width: 100%;
+  position: relative;
 }
 
 .grid-items-wrapper {
@@ -1035,6 +1060,7 @@ button {
   will-change: transform, opacity, box-shadow;
   overflow: hidden;
 }
+
 .grid-box {
   position: relative;
   display: flex;
@@ -1045,16 +1071,19 @@ button {
   overflow: hidden;
   height: auto;
 }
+
 .leftTopIcon {
   position: fixed;
   left: 0;
   top: 0;
 }
+
 .actionButton {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 /* Lottie容器样式 */
 .lottie-container {
   position: absolute;
@@ -1072,6 +1101,7 @@ button {
   width: 100%;
   height: 100%;
 }
+
 .bg-anim,
 .front-anim {
   position: absolute;
@@ -1096,7 +1126,8 @@ button {
 /* 正在拖拽的元素样式 */
 .being-dragged {
   z-index: 10;
-  opacity: 0.3; /* 降低原位置的不透明度 */
+  opacity: 0.3;
+  /* 降低原位置的不透明度 */
 }
 
 /* 被拖拽时原位置隐藏 */
@@ -1120,6 +1151,7 @@ button {
   left: 0;
   top: 0;
 }
+
 .flexBox {
   display: flex;
   justify-content: space-between;
@@ -1127,6 +1159,7 @@ button {
   position: relative;
   flex-direction: row;
 }
+
 .itemText {
   display: block;
   width: 80%;
@@ -1145,15 +1178,19 @@ button {
   0% {
     transform: rotateZ(2deg);
   }
+
   25% {
     transform: rotateZ(-2deg);
   }
+
   50% {
     transform: rotateZ(2deg);
   }
+
   75% {
     transform: rotateZ(-2deg);
   }
+
   100% {
     transform: rotateZ(2deg);
   }