Fix observe/0.7.23

src/packages/interactive/intersectionObserver/demo/index.tsx

@@ -32,15 +32,17 @@ export default function() {
   const [appear, setAppear] = useState(false);
 
   useEffect(() => {
-    const node = document.querySelector('.parent');
-    const intersectionObserver = createIntersectionObserver(null, node._internal);
+    setTimeout(() => {
+      const node = document.querySelector('.parent');
+      const intersectionObserver = createIntersectionObserver(null, node._internal);
 
-    // 由于rax运行时在微信存在shadow dom问题，所以采用深度选择器
-    const clsPre = isWeChatMiniProgram ? '.parent >>> ' : '';
-    intersectionObserver.relativeTo(clsPre + '.block').observe(clsPre + '.circle', res => {
-      console.log(res);
-      setAppear(res.intersectionRatio > 0);
-    });
+      // 由于rax运行时在微信存在shadow dom问题，所以采用深度选择器
+      const clsPre = isWeChatMiniProgram ? '.parent >>> ' : '';
+      intersectionObserver.relativeTo(clsPre + '.block').observe(clsPre + '.circle', res => {
+        console.log(res);
+        setAppear(res.intersectionRatio > 0);
+      });
+    }, 0);
   }, []);
 
 

src/packages/interactive/intersectionObserver/docs/README.en-US.md

@@ -190,6 +190,26 @@ useEffect(() => {
 }, []);
 ```
 
+为保证多端可用，可参考demo实现
+
+```js
+  useEffect(() => {
+    // 阿里小程序需在 ​page.onReady​ 之后执行 ​createIntersectionObserver()，setTimeout 可延迟执行时机
+    setTimeout(() => {
+      // node必须为block元素和circle元素的共同父元素
+      const node = document.querySelector('.parent');
+      const intersectionObserver = createIntersectionObserver(null, node._internal);
+
+      // 由于rax运行时在微信存在shadow dom问题，所以采用深度选择器
+      const clsPre = isWeChatMiniProgram ? '.parent >>> ' : '';
+      intersectionObserver.relativeTo(clsPre + '.block').observe(clsPre + '.circle', res => {
+        console.log(res);
+        setAppear(res.intersectionRatio > 0);
+      });
+    }, 0);
+  }, []);
+```
+
 </div>
 <div>
 

src/packages/interactive/intersectionObserver/docs/README.md

@@ -190,6 +190,26 @@ useEffect(() => {
 }, []);
 ```
 
+为保证多端可用，可参考demo实现
+
+```js
+  useEffect(() => {
+    // 阿里小程序需在 ​page.onReady​ 之后执行 ​createIntersectionObserver()，setTimeout 可延迟执行时机
+    setTimeout(() => {
+      // node必须为block元素和circle元素的共同父元素
+      const node = document.querySelector('.parent');
+      const intersectionObserver = createIntersectionObserver(null, node._internal);
+
+      // 由于rax运行时在微信存在shadow dom问题，所以采用深度选择器
+      const clsPre = isWeChatMiniProgram ? '.parent >>> ' : '';
+      intersectionObserver.relativeTo(clsPre + '.block').observe(clsPre + '.circle', res => {
+        console.log(res);
+        setAppear(res.intersectionRatio > 0);
+      });
+    }, 0);
+  }, []);
+```
+
 </div>
 <div>
 

src/packages/media/image/src/web/previewImage.ts

@@ -121,9 +121,17 @@ const previewImage = normalize.previewImage((args: PreviewImageOptions) => {
   const { clientWidth } = document.documentElement;
   let startX = 0;
   swiperEle.addEventListener('touchstart', (e) => {
+    if (e.touches.length > 1) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
     startX = e.targetTouches[0].pageX;
   });
   swiperEle.addEventListener('touchmove', (e) => {
+    if (e.touches.length > 1) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
     const moveX = e.targetTouches[0].pageX - startX;
     swiperEle.style.transform = `translateX(${-clientWidth * current + moveX * damp}px)`;
   });
@@ -144,7 +152,7 @@ const previewImage = normalize.previewImage((args: PreviewImageOptions) => {
   containerEle.appendChild(swiperEle);
 
   urls.forEach((url) => {
-    const swiperItemEle = document.createElement('div');
+    const swiperItemEle: any = document.createElement('div');
     swiperItemEle.className = `${clsPrefix}_item`;
     swiperItemEle.addEventListener('click', (e) => {
       e.stopPropagation();
@@ -155,6 +163,51 @@ const previewImage = normalize.previewImage((args: PreviewImageOptions) => {
     imageEle.className = `${clsPrefix}_img`;
     imageEle.src = url;
     swiperItemEle.appendChild(imageEle);
+
+    swiperItemEle.addEventListener('touchstart', (e) => {
+      if (e.touches.length > 1) {
+        e.stopPropagation();
+        e.preventDefault();
+        const point1 = e.touches[0];
+        const point2 = e.touches[1];
+        const xLen = Math.abs(point2.pageX - point1.pageX);
+        const yLen = Math.abs(point2.pageY - point1.pageY);
+        swiperItemEle.touchDistance = Math.sqrt(xLen * xLen + yLen * yLen);
+      } else {
+        swiperItemEle.touched = {
+          x: e.touches[0].pageX,
+          y: e.touches[0].pageY,
+        };
+      }
+    });
+    swiperItemEle.addEventListener('touchmove', (e) => {
+      if (e.touches.length > 1) {
+        e.stopPropagation();
+        e.preventDefault();
+        const xLen = Math.abs(e.touches[0].pageX - e.touches[1].pageX);
+        const yLen = Math.abs(e.touches[1].pageY - e.touches[1].pageY);
+        const touchDistance = Math.sqrt(xLen * xLen + yLen * yLen);
+
+        if (swiperItemEle.touchDistance) {
+          const pinchScale = (swiperItemEle.previousPinchScale || 1) + (touchDistance - swiperItemEle.touchDistance) / swiperItemEle.touchDistance;
+          const imageScale = Math.max(1, pinchScale);
+          imageEle.style.transform = `scale(${imageScale})`;
+          swiperItemEle.previousPinchScale = imageScale;
+        }
+        swiperItemEle.touchDistance = touchDistance;
+      } else if (swiperItemEle.previousPinchScale > 1) {
+        e.stopPropagation();
+        const x = (swiperItemEle.preX || 0) + (e.touches[0].pageX - swiperItemEle.touched.x);
+        const y = (swiperItemEle.preY || 0) + (e.touches[0].pageY - swiperItemEle.touched.y);
+        imageEle.style.transform = `scale(${swiperItemEle.previousPinchScale}) translate(${x}px, ${y}px)`;
+        swiperItemEle.preX = x;
+        swiperItemEle.preY = y;
+        swiperItemEle.touched = {
+          x: e.touches[0].pageX,
+          y: e.touches[0].pageY,
+        };
+      }
+    });
   });
 
   document.body.appendChild(containerEle);