@dolphinweex/weex-harmony 0.1.64 → 0.1.65

package/package.json

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

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

@@ -1,14 +1,24 @@
 <template>
   <div>
-    <!-- <text v-if="progressText.length > 0">{{progressText}}</text> -->
-    <iframe
-      :id="embedId"
+    <div
+      style="position: relative"
       v-if="url.length > 0 && pluginType != 'old-h5'"
-      :src="url"
-      :style="{ backgroundColor: backgroundColor, height: height }"
-      ref="iframe"
-      @load="onPageFinish"
-    ></iframe>
+      ref="iframeWrapper"
+      @touchstart="handleWrapperTouchStart"
+      @touchmove="handleWrapperTouchMove"
+      @touchend="handleWrapperTouchEnd"
+    >
+      <iframe
+        :id="embedId"
+        :src="url"
+        :style="{
+          backgroundColor: backgroundColor,
+          height: height,
+        }"
+        ref="iframe"
+        @load="onPageFinish"
+      ></iframe>
+    </div>
 
     <BaseSameLayer
       class="common-view-iframe"
@@ -37,7 +47,9 @@ export default {
       embedId: `embedId_iframe_${
         Date.now().toString(36) + Math.random().toString(36).substring(2)
       }`,
-      height: "100%",
+      height: '100%',
+      _wrapperTouchParams: null, // wrapper触摸参数
+      _parentScroller: null, // 父级scroller元素引用
     };
   },
   components: {
@@ -123,7 +135,7 @@ export default {
     };
     this._wrapperEl = findWrapperFromParent(); // 保存容器引用
     this._onMessage = (event) => {
-      if(event.data.type==='IFRAME_CONTENT_HEIGHT'){
+      if (event.data.type === 'IFRAME_CONTENT_HEIGHT') {
         const h = Number(event.data.height) || 0;
         if (!h) {
           return;
@@ -141,16 +153,100 @@ export default {
   },
   methods: {
     onPageFinish() {
-      if (this.$refs["iframe"]) {
-        this.$refs["iframe"].contentWindow.$midea_harmony_native =
+      if (this.$refs['iframe']) {
+        this.$refs['iframe'].contentWindow.$midea_harmony_native =
           window.$midea_harmony_native;
-        this.$refs["iframe"].contentWindow.isIframe = true;
-        this.$refs["iframe"].contentWindow.postMessage(
+        this.$refs['iframe'].contentWindow.isIframe = true;
+        this.$refs['iframe'].contentWindow.postMessage(
           JSON.stringify(window.$midea_harmony_native),
-          "*"
+          '*'
         );
       }
     },
+
+    handleWrapperTouchStart(e) {
+      // iframe会接收到事件并处理自己的滚动
+      // 找到父级scroller（轮播图容器）或者气他?
+      this._findParentScroller();
+      // 如果找到了父级scroller，手动触发它的touchstart处理QxQ
+      if (this._parentScroller) {
+        this._forwardEventToParent(e, 'touchstart');
+      }
+      const touch = e.touches[0];
+      this._wrapperTouchParams = {
+        startX: touch.pageX,
+        startY: touch.pageY,
+      };
+    },
+
+    handleWrapperTouchMove(e) {
+      if (!this._wrapperTouchParams) return;
+      // iframe正在处理自己的滚动（不阻止）同时转发事件给父级scroller
+      if (this._parentScroller) {
+        this._forwardEventToParent(e, 'touchmove');
+      }
+      const touch = e.touches[0];
+      const offsetX = touch.pageX - this._wrapperTouchParams.startX;
+      const offsetY = touch.pageY - this._wrapperTouchParams.startY;
+      const absX = Math.abs(offsetX);
+      const absY = Math.abs(offsetY);
+
+      if (absX > absY && absX > 10) {
+        console.log('📱 横向滑动：iframe内滚动 + 父级轮播图同时响应');
+      } else if (absY > absX && absY > 10) {
+        console.log('📜 纵向滑动：iframe内容滚动');
+      }
+    },
+
+    handleWrapperTouchEnd(e) {
+      // 转发touchend事件给父级
+      if (this._parentScroller) {
+        this._forwardEventToParent(e, 'touchend');
+      }
+      this._wrapperTouchParams = null;
+    },
+
+    // 查找父级scroller元素
+    _findParentScroller() {
+      if (this._parentScroller) return; 
+      let parent = this.$parent;
+      while (parent) {
+        const el = parent.$el;
+        if (
+          el &&
+          el.classList &&
+          (el.classList.contains('weex-scroller') ||
+            el.classList.contains('weex-slider') ||
+            el.classList.contains('weex-list'))
+        ) {
+          this._parentScroller = el;
+          console.log('✅ 找到父级scroller，将转发事件');
+          return;
+        }
+        parent = parent.$parent;
+      }
+      console.warn('⚠️ 未找到父级scroller');
+    },
+
+    // 手动转发事件到父级scroller
+    _forwardEventToParent(originalEvent, eventType) {
+      if (!this._parentScroller) return;
+      try {
+        const newEvent = new TouchEvent(eventType, {
+          bubbles: true,
+          cancelable: true,
+          touches: originalEvent.touches,
+          targetTouches: originalEvent.targetTouches,
+          changedTouches: originalEvent.changedTouches,
+          view: window,
+        });
+
+        // 直接触发到父级scroller元素
+        this._parentScroller.dispatchEvent(newEvent);
+      } catch (err) {
+        console.warn('无法转发触摸事件', err);
+      }
+    },
   },
 };
 </script>