@dolphinweex/weex-harmony 0.1.26 → 0.1.28

package/package.json

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

package/src/components/midea-common-weex-view.vue

@@ -59,7 +59,6 @@ export default {
   },
   methods: {  
     onPageFinish() {
-      console.log('加载完毕🥳','----->👉');
       this.$refs["iframe"].contentWindow.$midea_harmony_native = window.$midea_harmony_native;
       this.$refs["iframe"].contentWindow.isIframe = true;
       this.$refs["iframe"].contentWindow.postMessage(JSON.stringify(window.$midea_harmony_native), '*');

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

@@ -4,8 +4,9 @@
     :class="{ editMode: data.isEditing }"
     :style="gridItemStyle"
   >
+    <div class="items-container">
       <div class="grid-items-wrapper">
-        <transition-group name="grid-fade" tag="div"  class="grid-inner-wrapper">
+        <transition-group name="grid-fade" tag="div" class="grid-inner-wrapper">
           <div
             v-for="(item, index) in processedList"
             :key="item.itemView.id"
@@ -110,7 +111,7 @@
           </div>
         </transition-group>
       </div>
-
+    </div>
 
     <!-- 拖拽克隆元素 -->
     <div v-if="isDragClone" class="drag-clone" :style="dragCloneStyle">
@@ -200,10 +201,6 @@ export default {
       lastBestTarget: null,
       targetChangeTime: null,
       pendingTarget: null,
-      weexListInnerEl: null,
-      weexRefreshEl: null,
-      originListInnerStyle: null,
-      originRefreshStyle: null,
     };
   },
   computed: {
@@ -211,7 +208,6 @@ export default {
       return {
         '--grid-cols': this.data.spanCount || this.cols,
         '--grid-gap': `${this.data.spaceSize || 8}px`,
-        '--grid-margin': `${(this.data.layoutConfig.marginStart ) + (this.data.layoutConfig.marginEnd )}px`,
         marginTop: this.data.layoutConfig.marginTop * scla,
         marginBottom: this.data.layoutConfig.marginBottom * scla,
         marginLeft: this.data.layoutConfig.marginStart * scla,
@@ -246,63 +242,30 @@ export default {
     },
   },
   methods: {
-    searchDom(){
-      //在 slider组件内部时 阻止默认行为和冒泡都无法在长按的时候 阻止其滚动行为 只能查找去禁止
-      const currentEl = this.$el;
-      let parentEl = currentEl.parentElement;
-      let searchDepth = 0; // 搜索深度计数器
-      while (parentEl && !parentEl.classList.contains('weex-list-inner') && searchDepth < 5) {
-        parentEl = parentEl.parentElement;
-        searchDepth++; 
-      }
-      
-      if (parentEl) {
-        this.weexListInnerEl = parentEl;
-        this.originListInnerStyle = parentEl.style.touchAction || '';
-        
-        // 在weex-list-inner中查找weex-refresh子元素
-        const refreshEl = parentEl.querySelector('.weex-refresh');
-        if (refreshEl) {
-          this.weexRefreshEl = refreshEl;
-          this.originRefreshStyle = refreshEl.style.height || '';
-        }
-      }
-    },
     updateListItem(data) {
       console.log('updateListItem收到数据:', JSON.stringify(data));
       const id = data.itemView.id;
       const index = this.processedList.findIndex(
-        (item) => item.itemView.id === id
+        (item) => item.itemView.id == id
       );
       const dataIndex = this.data.list.findIndex(
-        (item) => item.itemView.id === id
+        (item) => item.itemView.id == id
       );
-      // 更新原始数据以确保watch能触发
-      if (dataIndex !== -1) {
-        // 使用Vue的$set确保响应式更新
-        this.$set(this.data.list, dataIndex, JSON.parse(JSON.stringify(data)));
-      }
+
       if (index === -1) {
         return;
       }
 
-    
-
       // 检查是否有动画URL的变化
       const oldBgAnimUrl = this.processedList[index].bgAnimView.animUrl || '';
       const oldLoadingAnimUrl =
         this.processedList[index].loadingAnimView.animUrl || '';
       const oldFrontAnimUrl =
         this.processedList[index].frontAnimView.animUrl || '';
+
       const newBgAnimUrl = data.bgAnimView.animUrl || '';
       const newLoadingAnimUrl = data.loadingAnimView.animUrl || '';
       const newFrontAnimUrl = data.frontAnimView.animUrl || '';
-
-      const hasAnimUrlChanged =
-        oldBgAnimUrl !== newBgAnimUrl ||
-        oldLoadingAnimUrl !== newLoadingAnimUrl ||
-        oldFrontAnimUrl !== newFrontAnimUrl;
-
       // 同时更新processedList和原始data.list数据
       this.processedList[index] = data;
       this.processedList = [...this.processedList];
@@ -314,83 +277,80 @@ export default {
       }
 
       // 如果动画URL有变化，重新初始化相关的Lottie动画
-      if (hasAnimUrlChanged) {
+      console.log('检测到动画URL变化，重新初始化动画');
 
-        // 等待下一帧DOM更新完成后再操作
-        this.$nextTick(() => {
-          // 清理旧的动画实例
-          const itemId = data.itemView.id;
-
-          // 清除所有相关的动画实例
-          const animKeys = [
-            `bg-${itemId}`,
-            `loading-${itemId}`,
-            `front-${itemId}`,
-          ];
-          animKeys.forEach((key) => {
-            if (this.lottieAnimations[key]) {
-              const anim = this.lottieAnimations[key];
-              try {
-                anim.removeEventListener('complete');
-                anim.removeEventListener('DOMLoaded');
-                anim.removeEventListener('data_ready');
-                anim.removeEventListener('loaded_images');
-                anim.removeEventListener('loopComplete');
-              } catch (e) {
-              }
-              anim.destroy();
-              delete this.lottieAnimations[key];
+      // 等待下一帧DOM更新完成后再操作
+      this.$nextTick(() => {
+        // 清理旧的动画实例
+        const itemId = String(data.itemView.id);
+
+        // 清除所有相关的动画实例
+        const animKeys = [
+          `bg-${itemId}`,
+          `loading-${itemId}`,
+          `front-${itemId}`,
+        ];
+        animKeys.forEach((key) => {
+          if (this.lottieAnimations[key]) {
+            console.log(`销毁动画实例: ${key}`);
+            const anim = this.lottieAnimations[key];
+            try {
+              anim.removeEventListener('complete');
+            } catch (e) {
+              console.warn(`移除事件监听器失败: ${e.message}`);
             }
-          });
+            anim.destroy();
+            delete this.lottieAnimations[key];
+          }
+        });
 
+        console.log('清理完成，开始重新初始化动画');
 
-          // 延迟一点时间确保DOM完全更新
-          setTimeout(() => {
-            // 重新初始化背景动画
-            if (newBgAnimUrl) {
-              this.loadLottieAnimation(
-                data.bgAnimView,
-                `bgAnim-${itemId}`,
-                `bg-${itemId}`,
-                data
-              );
-            }
+        // 延迟一点时间确保DOM完全更新
+        setTimeout(() => {
+          // 重新初始化背景动画
+          if (oldBgAnimUrl !== newBgAnimUrl) {
+            this.loadLottieAnimation(
+              data.bgAnimView,
+              `bgAnim-${itemId}`,
+              `bg-${itemId}`,
+              data
+            );
+          }
 
-            // 重新初始化加载动画
-            if (newLoadingAnimUrl) {
-              this.loadLottieAnimation(
-                data.loadingAnimView,
-                `loadingAnim-${itemId}`,
-                `loading-${itemId}`,
-                data
-              );
-            }
+          if (oldLoadingAnimUrl !== newLoadingAnimUrl) {
+            this.loadLottieAnimation(
+              data.loadingAnimView,
+              `loadingAnim-${itemId}`,
+              `loading-${itemId}`,
+              data
+            );
+          }
 
-            // 重新初始化前景动画
-            if (newFrontAnimUrl) {
-              this.loadLottieAnimation(
-                data.frontAnimView,
-                `frontAnim-${itemId}`,
-                `front-${itemId}`,
-                data
-              );
-            }
-          }, 100); // 增加延迟确保DOM已更新和旧动画已完全销毁
-        });
-      }
+          if (oldFrontAnimUrl !== newFrontAnimUrl) {
+            this.loadLottieAnimation(
+              data.frontAnimView,
+              `frontAnim-${itemId}`,
+              `front-${itemId}`,
+              data
+            );
+          }
+        }, 100); // 增加延迟确保DOM已更新和旧动画已完全销毁
+      });
     },
     getListData(callback) {
       let data = Array.from(this.processedList);
-      data = data.map((item)=>({
+      data = data.map((item) => ({
         ...item,
         itemView: {
           ...item.itemView,
-          id:String(item.itemView.id)
-        }
-      }))
+          id: String(item.itemView.id),
+        },
+      }));
       callback({ listData: data });
     },
     rightIconClick(e) {
+      console.log('rightIconClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation();
       this.$emit('onClickRightIcon', e);
@@ -405,7 +365,9 @@ export default {
     selectIconClick(e, item, index) {
       e.preventDefault();
       e.stopPropagation(); // 阻止事件冒泡到itemViewClick
-      item.itemView.isSelected = !item.itemView.isSelected;
+      if (item.selectIcon.visibility) {
+        item.itemView.isSelected = !item.itemView.isSelected;
+      }
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -413,7 +375,7 @@ export default {
         ...e,
       };
       this.$emit('onClickSelectIcon', target);
-      this.$emit('onSelectItems',target)
+      this.$emit('onSelectItems', target);
       return false;
     },
 
@@ -422,25 +384,31 @@ export default {
       if (e.defaultPrevented) {
         return;
       }
-      e.preventDefault();
-      e.stopPropagation();
-      // 确保取消任何长按计时器
-      this.cancelLongPress();
-      if (this.data.isEditing) {
-        item.itemView.isSelected = !item.itemView.isSelected;
-        this.$emit('onSelectItems',target)
-        return;
-      }
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
         index,
         ...e,
       };
+      console.log('itemViewClick');
+      // 确保取消任何长按计时器
+      this.cancelLongPress();
+      if (this.data.isEditing) {
+        if (item.selectIcon.visibility) {
+          item.itemView.isSelected = !item.itemView.isSelected;
+        }
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+
       this.$emit('onClickItem', target);
+      this.data.isEditing&&item.selectIcon.visibility&&this.$emit('onSelectItems', target);
+
     },
 
     actionClick(e, item, index) {
+      console.log('actionClick执行，阻止事件冒泡');
       e.preventDefault();
       e.stopPropagation(); // 阻止事件冒泡到itemViewClick
 
@@ -459,44 +427,51 @@ export default {
 
     // 新增方法：清理除指定项目外的所有动画实例
     cleanupOtherAnimations(currentItemId) {
+      console.log('清理其他项目的动画实例，当前项目ID:', currentItemId);
 
-      // 遍历所有动画实例
       Object.keys(this.lottieAnimations).forEach((key) => {
-        // 检查是否为其他项目的动画
         if (!key.includes(`-${currentItemId}`)) {
           if (this.lottieAnimations[key]) {
+            console.log(`销毁其他项目的动画实例: ${key}`);
             const anim = this.lottieAnimations[key];
 
-            // 移除所有事件监听器
-            try {
-              anim.removeEventListener('complete');
-              anim.removeEventListener('DOMLoaded');
-              anim.removeEventListener('data_ready');
-              anim.removeEventListener('loaded_images');
-              anim.removeEventListener('loopComplete');
-            } catch (e) {
-              console.warn(`移除事件监听器失败: ${e.message}`);
-            }
-
-            anim.destroy();
-            delete this.lottieAnimations[key];
+            // 不要立即销毁，而是先停止动画
+            anim.pause();
 
-            // 提取项目ID和动画类型
-            const parts = key.split('-');
-            if (parts.length === 2) {
-              const animType = parts[0]; // bg, loading, front
-              const itemId = parts[1];
-
-              // 隐藏对应的动画容器
-              this.$nextTick(() => {
-                const refName = `${animType}Anim-${itemId}`;
-                const animContainer =
-                  this.$refs[refName] && this.$refs[refName][0];
-                if (animContainer) {
-                  animContainer.style.display = 'none';
+            // 使用 setTimeout 延迟销毁，给新动画一个启动的时间
+            setTimeout(() => {
+              try {
+                if (this.lottieAnimations[key] === anim) {
+                  anim.removeEventListener('complete');
+                  anim.destroy();
+                  delete this.lottieAnimations[key];
+
+                  // 提取项目ID和动画类型
+                  const parts = key.split('-');
+                  if (parts.length === 2) {
+                    const animType = parts[0];
+                    const itemId = parts[1];
+
+                    // 延迟隐藏对应的动画容器
+                    this.$nextTick(() => {
+                      const refName = `${animType}Anim-${itemId}`;
+                      const animContainer =
+                        this.$refs[refName] && this.$refs[refName][0];
+                      if (animContainer) {
+                        // 使用 opacity 过渡而不是直接设置 display: none
+                        animContainer.style.opacity = '0';
+                        animContainer.style.transition = 'opacity 0.2s';
+                        setTimeout(() => {
+                          animContainer.style.display = 'none';
+                        }, 200);
+                      }
+                    });
+                  }
                 }
-              });
-            }
+              } catch (e) {
+                console.warn(`清理动画失败: ${e.message}`);
+              }
+            }, 50);
           }
         }
       });
@@ -530,12 +505,12 @@ export default {
           // 使用mergeDate合并全局数据和项目数据
           processedItem[type] = this.mergeDate(item[type] || {}, type);
         });
-
         return processedItem;
       });
     },
     getItemStyle(item, type) {
       const result = this.mergeDate(item[type] || {}, type);
+      console.log(type, this.applyNormalAttribute(result), 'ggg');
       return this.applyNormalAttribute(result);
     },
     mergeDate(target, type) {
@@ -605,30 +580,34 @@ export default {
         return;
       }
       this.$emit('onDragEventStart', e);
+      
+      // 只在编辑模式下阻止事件冒泡和默认行为
+      if (this.data.isEditing) {
+        if (e.oriEvent) {
+          // e.oriEvent.preventDefault();
+          // e.oriEvent.stopPropagation();
+          // e.oriEvent.stopImmediatePropagation();
+        }
+        // e.preventDefault && e.preventDefault();
+        // e.stopPropagation && e.stopPropagation();
+        // e.stopImmediatePropagation && e.stopImmediatePropagation();
+      }
+      
       // 清除任何现有计时器
       this.cancelLongPress();
       // 记录起始触摸位置和索引
       const touch = e.changedTouches[0];
       this.touchStartX = touch.pageX;
       this.touchStartY = touch.pageY;
+      console.log('开始长按ddddddddd', touch, touch.pageY, touch.pageX);
       this.longPressStartIndex = index;
       this.isScrolling = false; // 重置滚动状态
 
-      // 注意：不在这里阻止默认行为，允许滚动
-      document.removeEventListener('touchmove', this.onTouchMove, {
-        passive: true, // 设置为passive:true允许浏览器进行滚动优化
-      });
-      document.removeEventListener('touchend', this.onTouchEnd, {
-        passive: true,
+      // 添加临时事件监听器，在长按期间阻止滚动
+      document.addEventListener('touchmove', this.onTouchMove, {
+        passive: false // 设置为false以允许阻止默认行为
       });
 
-      if (this.isTouchDragging) {
-        this.$emit('drag-end', {
-          items: [...this.itemsList],
-        });
-      }
-
-
       // 设置新的长按计时器
       this.longPressTimer = setTimeout(() => {
         // 只有在没有滚动的情况下才激活拖拽模式
@@ -636,7 +615,6 @@ export default {
           this.activateDragMode(index);
         }
       }, this.longPressDuration);
-      // 不阻止默认行为 - 允许滚动
     },
 
     // 检查长按过程中的移动
@@ -644,14 +622,28 @@ export default {
       if (!this.data.isEditable) {
         return;
       }
+
       const touch = e.changedTouches[0];
+      const moveX = Math.abs(touch.pageX - this.touchStartX);
+      const moveY = Math.abs(touch.pageY - this.touchStartY);
+
+      // 如果水平移动大于垂直移动，则阻止事件传播
+      if (moveX > moveY &&!this.isTouchDragging && this.data.isEditing) {
+        if (e.oriEvent) {
+          e.oriEvent.preventDefault();
+          e.oriEvent.stopPropagation();
+          e.oriEvent.stopImmediatePropagation();
+          e.preventDefault && e.preventDefault();
+          e.stopPropagation && e.stopPropagation();
+          e.stopImmediatePropagation && e.stopImmediatePropagation();
+        }
+      }
+
       // 如果已经在拖拽模式，交给onTouchMove处理
       if (this.isTouchDragging) {
         this.onTouchMove(e);
         return;
       }
-      const moveX = Math.abs(touch.pageX - this.touchStartX);
-      const moveY = Math.abs(touch.pageY - this.touchStartY);
 
       // 检测是否在滚动
       if (moveY > this.scrollThreshold * 3) {
@@ -665,14 +657,20 @@ export default {
       if (moveX > this.scrollThreshold || moveY > this.scrollThreshold) {
         this.cancelLongPress();
       }
-      this.data.isEditing && e.oriEvent.stopPropagation()
-      this.data.isEditing && e.oriEvent.preventDefault()
 
+      return false;
     },
 
     // 激活拖拽模式
     activateDragMode(index) {
       console.log('长按触发，进入编辑模式');
+      // 进入编辑模式
+
+      if(this.data.isEditing){
+            // 设置当前拖拽索引
+      this.draggingIndex = index;
+      this.isTouchDragging = true;
+
       // 此时添加阻止默认行为的事件监听，但只影响拖拽状态下的行为
       document.addEventListener('touchmove', this.onTouchMove, {
         passive: false, // 只有在拖拽模式下才阻止默认行为
@@ -680,50 +678,40 @@ export default {
       document.addEventListener('touchend', this.onTouchEnd, {
         passive: true,
       });
-      if (this.data.isEditing) {
-        // 设置当前拖拽索引
-        this.draggingIndex = index;
-        this.isTouchDragging = true;
-
-        // 使用存储的固定宽高
-        this.draggedItemRect = {
-          width: this.fixedItemWidth,
-          height: this.fixedItemHeight,
-        };
-
-        // 获取当前元素位置用于计算偏移
-        const element = document.querySelectorAll('.grid-item')[index];
-        if (element) {
-          const rect = element.getBoundingClientRect();
-          // 计算触摸点相对于元素左上角的偏移
-          this.touchOffsetX = this.touchStartX - rect.left;
-          this.touchOffsetY = this.touchStartY - rect.top;
-
-          // 设置克隆元素的初始位置
-          this.dragCloneX = rect.left;
-          this.dragCloneY = rect.top;
-
-          // 显示拖拽克隆
-          this.isDragClone = true;
-
-          // 立即执行一次定位以确保初始位置准确
-          requestAnimationFrame(() => {
-            this.dragCloneX = this.touchStartX - this.touchOffsetX;
-            this.dragCloneY = this.touchStartY - this.touchOffsetY;
-          });
 
-          console.log('拖拽克隆已创建');
-        }
+      // 使用存储的固定宽高
+      this.draggedItemRect = {
+        width: this.fixedItemWidth,
+        height: this.fixedItemHeight,
+      };
 
-        this.longPressTimer = null;
+      // 获取当前元素位置用于计算偏移
+      const element = document.querySelectorAll('.grid-item')[index];
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        // 计算触摸点相对于元素左上角的偏移
+        this.touchOffsetX = this.touchStartX - rect.left;
+        this.touchOffsetY = this.touchStartY - rect.top;
+
+        // 设置克隆元素的初始位置
+        this.dragCloneX = rect.left;
+        this.dragCloneY = rect.top;
+
+        // 显示拖拽克隆
+        this.isDragClone = true;
+
+        // 立即执行一次定位以确保初始位置准确
+        requestAnimationFrame(() => {
+          this.dragCloneX = this.touchStartX - this.touchOffsetX;
+          this.dragCloneY = this.touchStartY - this.touchOffsetY;
+        });
+
+        console.log('拖拽克隆已创建');
       }
-        // 进入编辑模式
-        if (!this.data.isEditing) {
-        // 设置编辑状态并隐藏weex-refresh
-        this.data.isEditing = true;
-        this.$emit('onEditStateChanged', true);
-        this.applyDragModeStyles(); // 应用编辑模式样式（隐藏refresh）
       }
+      this.data.isEditing = true;
+      this.$emit('onEditStateChanged', true);
+      this.longPressTimer = null;
     },
 
     // 取消长按计时器
@@ -739,6 +727,18 @@ export default {
     onTouchMove(e) {
       if (!this.isTouchDragging) return;
 
+      // 确保在拖拽模式下阻止所有事件传播
+      if (this.isTouchDragging && this.data.isEditing) {
+        if (e.oriEvent) {
+          e.oriEvent.preventDefault();
+          e.oriEvent.stopPropagation();
+          e.oriEvent.stopImmediatePropagation(); // 添加这行以确保事件不会继续传播
+        }
+        e.preventDefault && e.preventDefault();
+        e.stopPropagation && e.stopPropagation();
+        e.stopImmediatePropagation && e.stopImmediatePropagation();
+      }
+
       const touch = e.changedTouches[0];
 
       // 更新目标位置而非直接设置
@@ -853,8 +853,6 @@ export default {
         this.draggingIndex = bestTarget;
         this.lastSwapTime = now;
       }
-      this.data.isEditing && e.oriEvent.stopPropagation()
-      this.data.isEditing && e.oriEvent.preventDefault()
     },
 
     // 新增：平滑更新拖拽位置的方法
@@ -910,12 +908,13 @@ export default {
         this.isDragClone = false;
         this.hoverIndex = null;
         this.draggingIndex = null;
-        
-        // 如果不再拖拽，恢复touch-action（但保持refresh隐藏，因为仍在编辑状态）
-        const elements = this.findParentElements();
-        if (elements.listInner) {
-          elements.listInner.style.touchAction = this.originListInnerStyle;
-        }
+        this.lastBestTarget = null;
+        this.targetChangeTime = null;
+        this.pendingTarget = null;
+        this.touchStartX = 0;
+        this.touchStartY = 0;
+        this.targetTouchX = 0;
+        this.targetTouchY = 0;
       }
     },
 
@@ -923,9 +922,6 @@ export default {
     onTouchEnd(e) {
       console.log('全局触摸结束');
 
-      // 恢复拖拽模式前的样式
-      this.restoreDragModeStyles();
-      
       // 移除全局事件监听
       document.removeEventListener('touchmove', this.onTouchMove, {
         passive: false,
@@ -976,10 +972,6 @@ export default {
             console.log(`销毁旧动画实例: ${key}`);
             try {
               anim.removeEventListener('complete');
-              anim.removeEventListener('DOMLoaded');
-              anim.removeEventListener('data_ready');
-              anim.removeEventListener('loaded_images');
-              anim.removeEventListener('loopComplete');
             } catch (e) {
               console.warn(`移除事件监听器失败: ${e.message}`);
             }
@@ -1000,7 +992,12 @@ export default {
         setTimeout(() => {
           // 为每个列表项初始化动画
           this.processedList.forEach((item) => {
-            const itemId = item.itemView.id;
+            const itemId = String(item.itemView.id);
+            console.log('处理项目ID:', itemId);
+            console.log('loadingAnimView:', item.loadingAnimView);
+            console.log('bgAnimView:', item.bgAnimView);
+            console.log('frontAnimView:', item.frontAnimView);
+
             // 加载背景动画
             this.loadLottieAnimation(
               item.bgAnimView,
@@ -1032,149 +1029,121 @@ export default {
     // 抽取公共的loadLottieAnimation方法
     loadLottieAnimation(animView, refName, animKey, item) {
       if (!animView || !animView.animUrl) {
+        console.log(`[${animKey}] 跳过加载：animUrl不存在`);
         return;
       }
 
+      console.log(
+        `[${animKey}] 尝试初始化${refName}, animUrl:`,
+        animView.animUrl
+      );
+
       const animEl = this.$refs[refName];
       if (!animEl || !animEl[0]) {
+        console.warn(`[${animKey}] 未找到${refName}的DOM引用`);
         return;
       }
 
       try {
-        // 如果已经有实例，先销毁它
+        // 如果已经有实例，先暂停它
         if (this.lottieAnimations[animKey]) {
-          this.lottieAnimations[animKey].destroy();
-          delete this.lottieAnimations[animKey];
+          this.lottieAnimations[animKey].pause();
         }
 
-        // 确保animView.visibility不为0才初始化动画
+        // 确保容器可见且透明度重置
+        animEl[0].style.display = '';
+        animEl[0].style.opacity = '1';
+        animEl[0].style.transition = 'opacity 0.2s';
+
         if (
           typeof animView.visibility !== 'number' ||
           animView.visibility !== 0
         ) {
-          // 使用fetch方式获取动画数据
-          fetch(animView.animUrl)
-            .then((response) => {
-              if (!response.ok) {
-                throw new Error('Network response was not ok');
-              }
-              return response.json();
-            })
-            .then((animationData) => {
-              // 再次检查是否已有实例（可能在fetch期间创建了）
-              if (this.lottieAnimations[animKey]) {
-                this.lottieAnimations[animKey].destroy();
-                delete this.lottieAnimations[animKey];
-              }
+          // 延迟一帧再销毁旧实例
+          requestAnimationFrame(() => {
+            if (this.lottieAnimations[animKey]) {
+              this.lottieAnimations[animKey].destroy();
+              delete this.lottieAnimations[animKey];
+            }
 
-              // 创建新的动画实例
-              const anim = lottie.loadAnimation({
-                container: animEl[0],
-                renderer: 'svg',
-                loop: Boolean(item.animRepeatCount) || false,
-                autoplay: true,
-                animationData: animationData,
-                rendererSettings: {
-                  preserveAspectRatio: 'xMidYMid slice',
-                },
-              });
-
-              // 保存动画实例
-              this.lottieAnimations[animKey] = anim;
-
-              // 添加动画事件监听
-
-              anim.addEventListener('complete', () => {
-                // 检查是否需要销毁动画（非循环动画完成后销毁）
-                if (!item.animRepeatCount) {
-                  // 销毁前再次检查实例是否存在
-                  if (this.lottieAnimations[animKey] === anim) {
-                    anim.removeEventListener('complete');
-                    anim.removeEventListener('DOMLoaded');
-                    anim.removeEventListener('data_ready');
-                    anim.removeEventListener('loaded_images');
-                    anim.removeEventListener('loopComplete');
-                    anim.destroy();
-                    delete this.lottieAnimations[animKey];
-
-                    // 查找并隐藏对应的动画容器
-                    this.$nextTick(() => {
-                      const animContainer =
-                        this.$refs[refName] && this.$refs[refName][0];
-                      if (animContainer) {
-                        animContainer.style.display = 'none';
-                      }
+            // 创建新的动画实例
+            console.log(`[${animKey}] 创建新的动画实例`);
+            const anim = lottie.loadAnimation({
+              container: animEl[0],
+              renderer: 'svg',
+              loop: Boolean(item.animRepeatCount) || false,
+              autoplay: true,
+              path: animView.animUrl,
+              rendererSettings: {
+                preserveAspectRatio: 'xMidYMid slice',
+                progressiveLoad: true, // 启用渐进式加载
+                hideOnTransparent: true, // 优化透明度处理
+              },
+            });
 
-                      // 将对应数据中的animUrl清空
-                      const itemId = item.itemView.id;
-                      const index = this.processedList.findIndex(
-                        (i) => i.itemView.id === itemId
+            this.lottieAnimations[animKey] = anim;
+            anim.addEventListener('complete', () => {
+              // 检查是否需要销毁动画（非循环动画完成后销毁）
+              if (!item.animRepeatCount) {
+                // 销毁前再次检查实例是否存在
+                if (this.lottieAnimations[animKey] === anim) {
+                  anim.removeEventListener('complete');
+                  anim.destroy();
+                  delete this.lottieAnimations[animKey];
+                  // 将对应数据中的animUrl清空
+                  const itemId = String(item.itemView.id);
+                  const index = this.processedList.findIndex(
+                    (i) => i.itemView.id == itemId
+                  );
+                  if (index !== -1) {
+                    // 根据动画类型设置对应的animUrl为空
+                    if (animKey.startsWith('bg-')) {
+                      this.$set(
+                        this.processedList[index].bgAnimView,
+                        'animUrl',
+                        ''
                       );
-                      if (index !== -1) {
-                        // 根据动画类型设置对应的animUrl为空
-                        if (animKey.startsWith('bg-')) {
-                          this.$set(
-                            this.processedList[index].bgAnimView,
-                            'animUrl',
-                            ''
-                          );
-                          // 同步更新原始数据
-                          const dataIndex = this.data.list.findIndex(
-                            (i) => i.itemView.id === itemId
-                          );
-                          if (dataIndex !== -1) {
-                            this.$set(
-                              this.data.list[dataIndex].bgAnimView,
-                              'animUrl',
-                              ''
-                            );
-                          }
-                        } else if (animKey.startsWith('loading-')) {
-                          this.$set(
-                            this.processedList[index].loadingAnimView,
-                            'animUrl',
-                            ''
-                          );
-                          // 同步更新原始数据
-                          const dataIndex = this.data.list.findIndex(
-                            (i) => i.itemView.id === itemId
-                          );
-                          if (dataIndex !== -1) {
-                            this.$set(
-                              this.data.list[dataIndex].loadingAnimView,
-                              'animUrl',
-                              ''
-                            );
-                          }
-                        } else if (animKey.startsWith('front-')) {
-                          this.$set(
-                            this.processedList[index].frontAnimView,
-                            'animUrl',
-                            ''
-                          );
-                          // 同步更新原始数据
-                          const dataIndex = this.data.list.findIndex(
-                            (i) => i.itemView.id === itemId
-                          );
-                          if (dataIndex !== -1) {
-                            this.$set(
-                              this.data.list[dataIndex].frontAnimView,
-                              'animUrl',
-                              ''
-                            );
-                          }
-                        }
-                      }
-                    });
+                      this.$set(
+                        this.data.list[index].bgAnimView,
+                        'animUrl',
+                        ''
+                      );
+                    } else if (animKey.startsWith('loading-')) {
+                      this.$set(
+                        this.processedList[index].loadingAnimView,
+                        'animUrl',
+                        ''
+                      );
+                      this.$set(
+                        this.data.list[index].loadingAnimView,
+                        'animUrl',
+                        ''
+                      );
+                    } else if (animKey.startsWith('front-')) {
+                      this.$set(
+                        this.processedList[index].frontAnimView,
+                        'animUrl',
+                        ''
+                      );
+                      this.$set(
+                        this.data.list[index].frontAnimView,
+                        'animUrl',
+                        ''
+                      );
+                    }
+                    console.log(`[${animKey}] 已清空动画URL数据`);
+                    item.addEventListener('touchstart', (e) => this.startLongPress(e, index), { passive: false });
+                    item.addEventListener('touchmove', this.checkLongPressMove, { passive: false });
+                    item.addEventListener('touchend', this.endTouch, { passive: false });
+                    item.addEventListener('touchcancel', this.endTouch, { passive: false });
                   }
                 }
-              });
-
-            })
-            .catch((error) => {
+              }
             });
-        } 
+          });
+        }
       } catch (error) {
+        console.error(`[${animKey}] 初始化失败:`, error);
       }
     },
 
@@ -1197,40 +1166,6 @@ export default {
       // 这里可以添加将来的处理逻辑
       return false;
     },
-
-    // 查找父级元素和refresh元素
-    findParentElements() {
-      // 返回存储的元素引用
-      return {
-        listInner: this.weexListInnerEl,
-        refresh: this.weexRefreshEl
-      };
-    },
-    
-    // 进入拖拽模式时应用样式
-    applyDragModeStyles() {
-      const elements = this.findParentElements();
-      
-      // 设置weex-list-inner的touch-action: none（只在拖拽时）
-      if (elements.listInner && this.isTouchDragging) {
-        elements.listInner.style.touchAction = 'none';
-      }
-    },
-    
-    // 退出拖拽模式时恢复样式
-    restoreDragModeStyles() {
-      const elements = this.findParentElements();
-      
-      // 恢复weex-list-inner的touch-action（只在拖拽时修改）
-      if (elements.listInner && this.isTouchDragging) {
-        elements.listInner.style.touchAction = this.originListInnerStyle;
-      }
-      
-      // 如果不在编辑状态，恢复weex-refresh的display
-      if (elements.refresh && !this.data.isEditing) {
-        elements.refresh.style.display = 'flex';
-      }
-    },
   },
   watch: {
     // 监听初始数据变化
@@ -1247,9 +1182,20 @@ export default {
       handler(newList, oldList) {
         this.processedList = this.generateDataList();
         this.$nextTick(() => {
-          this.updateGridBoxWidth();
-          this.updateFixedItemSize();
-          this.initLottieAnimations();
+          // 再次使用 nextTick 确保 DOM 完全更新
+          this.$nextTick(() => {
+            const gridItems = document.querySelectorAll('.grid-item');
+            gridItems.forEach((item, index) => {
+              const hasEvents = item._vei;
+              if (!hasEvents) {
+                item.addEventListener('touchstart', (e) => this.startLongPress(e, index), { passive: false });
+                item.addEventListener('touchmove', this.checkLongPressMove, { passive: false });
+                item.addEventListener('touchend', this.endTouch, { passive: false });
+                item.addEventListener('touchcancel', this.endTouch, { passive: false });
+              }
+            });
+            this.initLottieAnimations();
+          });
         });
       },
       deep: true,
@@ -1258,119 +1204,12 @@ export default {
     processedList: {
       handler(newList, oldList) {
         if (!newList || !newList.length || this.isTouchDragging) return;
-
         // 避免在拖拽过程中重新初始化动画
         if (this.draggingIndex !== null) return;
-
         // 检查每个项目的动画URL是否有变化
-        newList.forEach((item, index) => {
-          // 如果是新增的项目，直接更新
-          if (!oldList || !oldList[index]) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              this.loadLottieAnimation(
-                item.bgAnimView,
-                `bgAnim-${itemId}`,
-                `bg-${itemId}`,
-                item
-              );
-              this.loadLottieAnimation(
-                item.loadingAnimView,
-                `loadingAnim-${itemId}`,
-                `loading-${itemId}`,
-                item
-              );
-              this.loadLottieAnimation(
-                item.frontAnimView,
-                `frontAnim-${itemId}`,
-                `front-${itemId}`,
-                item
-              );
-            });
-            return;
-          }
-
-          // 检查bgAnimView.animUrl是否变化
-          if (
-            item.bgAnimView &&
-            oldList[index].bgAnimView &&
-            item.bgAnimView.animUrl !== oldList[index].bgAnimView.animUrl
-          ) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              if (this.lottieAnimations[`bg-${itemId}`]) {
-                this.lottieAnimations[`bg-${itemId}`].destroy();
-                delete this.lottieAnimations[`bg-${itemId}`];
-              }
-              this.loadLottieAnimation(
-                item.bgAnimView,
-                `bgAnim-${itemId}`,
-                `bg-${itemId}`,
-                item
-              );
-            });
-          }
-
-          // 检查loadingAnimView.animUrl是否变化
-          if (
-            item.loadingAnimView &&
-            oldList[index].loadingAnimView &&
-            item.loadingAnimView.animUrl !==
-              oldList[index].loadingAnimView.animUrl
-          ) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              if (this.lottieAnimations[`loading-${itemId}`]) {
-                this.lottieAnimations[`loading-${itemId}`].destroy();
-                delete this.lottieAnimations[`loading-${itemId}`];
-              }
-              this.loadLottieAnimation(
-                item.loadingAnimView,
-                `loadingAnim-${itemId}`,
-                `loading-${itemId}`,
-                item
-              );
-            });
-          }
-
-          // 检查frontAnimView.animUrl是否变化
-          if (
-            item.frontAnimView &&
-            oldList[index].frontAnimView &&
-            item.frontAnimView.animUrl !== oldList[index].frontAnimView.animUrl
-          ) {
-            this.$nextTick(() => {
-              const itemId = item.itemView.id;
-              if (this.lottieAnimations[`front-${itemId}`]) {
-                this.lottieAnimations[`front-${itemId}`].destroy();
-                delete this.lottieAnimations[`front-${itemId}`];
-              }
-              this.loadLottieAnimation(
-                item.frontAnimView,
-                `frontAnim-${itemId}`,
-                `front-${itemId}`,
-                item
-              );
-            });
-          }
-        });
       },
       deep: true,
     },
-    // 添加对编辑状态的监听
-    'data.isEditing': {
-      handler(newValue) {
-        const elements = this.findParentElements();
-        if (elements.refresh) {
-          if (newValue) {
-            elements.refresh.style.maxHeight = '0px';
-          } else {
-            elements.refresh.style.maxHeight = '999px'
-          }
-        }
-      },
-      immediate: true
-    },
   },
   mounted() {
     console.log(this.data, 'djdjdjdjdjdjdj');
@@ -1379,8 +1218,6 @@ export default {
     // 获取并存储固定宽高
     this.updateFixedItemSize();
 
-    this.searchDom()
-
     // 监听窗口大小变化，更新grid-box宽度
     window.addEventListener('resize', () => {
       this.updateGridBoxWidth();
@@ -1414,6 +1251,7 @@ export default {
     Object.keys(this.lottieAnimations).forEach((key) => {
       const anim = this.lottieAnimations[key];
       if (anim && typeof anim.destroy === 'function') {
+        console.log(`组件销毁时清理动画: ${key}`);
         try {
           anim.removeEventListener('complete');
           anim.removeEventListener('DOMLoaded');
@@ -1421,6 +1259,7 @@ export default {
           anim.removeEventListener('loaded_images');
           anim.removeEventListener('loopComplete');
         } catch (e) {
+          console.warn(`移除事件监听器失败: ${e.message}`);
         }
         anim.destroy();
       }
@@ -1433,11 +1272,6 @@ export default {
   created() {
     // 初始化处理后的数据列表
     this.processedList = this.generateDataList();
-
-    // 添加测试拖拽模式的方法
-    window.testDragMode = (index = 0) => {
-      this.testDragMode(index);
-    };
   },
 };
 </script>
@@ -1455,6 +1289,10 @@ button {
   position: relative;
 }
 
+.items-container {
+  width: 100%;
+}
+
 .grid-items-wrapper {
   width: 100%;
   position: relative;
@@ -1464,7 +1302,7 @@ button {
   display: grid;
   grid-template-columns: repeat(var(--grid-cols), 1fr);
   grid-gap: var(--grid-gap);
-  width: calc(100% - var(--grid-margin));
+  width: calc(100% - 74px);
 }
 
 /* 优化排序过渡效果 */