From 05d1eb43713760aa3a93160827b36e1769c86333 Mon Sep 17 00:00:00 2001
From: jixinbao <jixinbao@dcloud.io>
Date: Wed, 22 May 2024 16:53:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=20ResizeObserver?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  2 --
 .../resize-observer/resize-observer.test.js   | 10 +-----
 .../API/resize-observer/resize-observer.uvue  | 36 ++++++++++++-------
 pages/tabBar/API.uvue                         |  2 --
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/pages.json b/pages.json
index 1c86ade4..89bda868 100644
--- a/pages.json
+++ b/pages.json
@@ -1434,7 +1434,6 @@
         "backgroundColorContent": "#fffae8"
       }
     },
-    // #ifdef APP-ANDROID || WEB
     {
       "path" : "pages/API/resize-observer/resize-observer",
       "style" :
@@ -1442,7 +1441,6 @@
         "navigationBarTitleText" : "resize observer"
       }
     },
-    // #endif
     {
       "path" : "pages/CSS/overflow/overflow-visible-event",
       "style" :
diff --git a/pages/API/resize-observer/resize-observer.test.js b/pages/API/resize-observer/resize-observer.test.js
index 22160835..ad6de613 100644
--- a/pages/API/resize-observer/resize-observer.test.js
+++ b/pages/API/resize-observer/resize-observer.test.js
@@ -1,13 +1,5 @@
 describe('api-resize-observer', () => {
-  if (
-    !process.env.uniTestPlatformInfo.startsWith('android') &&
-    !process.env.uniTestPlatformInfo.startsWith('web')
-  ) {
-    it('dummyTest', async () => {
-      expect(1).toBe(1)
-    })
-    return
-  }
+
 
   let page
   beforeAll(async () => {
diff --git a/pages/API/resize-observer/resize-observer.uvue b/pages/API/resize-observer/resize-observer.uvue
index d2377add..b8a60099 100644
--- a/pages/API/resize-observer/resize-observer.uvue
+++ b/pages/API/resize-observer/resize-observer.uvue
@@ -4,13 +4,15 @@
     <view v-show="boxDisplay" style="align-items: center; justify-content: center; margin: 10px;">
       <view
         style="width: 140px; height: 140px; background-color: blue; align-items: center; justify-content: center; padding: 5px;"
-          id="outBox" @click="outBoxClick">
+        id="outBox" @click="outBoxClick">
         <view style="width: 80px; height: 80px; background-color: red; padding: 5px;" id="innerBox"
           @click="innerBoxClick"></view>
       </view>
     </view>
     <button @click="revertBoxSize">还原修改前元素宽高</button>
-    <button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
+    <button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
+    <button @click='cancelListen'>停止监听</button>
+    <button @click='goOnListen'>恢复监听</button>
     <view>
       <text class="info-text">蓝色方块元素:</text>
       <view class="info-item">
@@ -34,7 +36,7 @@
         boxDisplay: false,
         outBoxElement: null as UniElement | null,
         innerBoxElement: null as UniElement | null,
-        resizeObserver: null as UniResizeObserver | null,
+        resizeObserver: null as UniResizeObserver | null,
         outBoxElementOnResize: false
       }
     },
@@ -47,9 +49,10 @@
     onReady() {
       if (this.resizeObserver == null) {
         this.resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
+
           entries.forEach(entry => {
             if (entry.target == this.outBoxElement) {
-              this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry)
+              this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry)
               this.outBoxElementOnResize = true
             } else if (entry.target == this.innerBoxElement) {
               this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
@@ -63,7 +66,7 @@
         this.innerBoxElement = uni.getElementById("innerBox")
         if (this.innerBoxElement != null) {
           this.resizeObserver!.observe(this.innerBoxElement!)
-        }
+        }
         this.boxDisplay = true
       }
     },
@@ -89,13 +92,13 @@
           this.innerBoxElement!.style.setProperty("width", "80px")
           this.innerBoxElement!.style.setProperty("height", "80px")
         }
-      },
-      //自动化测试专用
-      setOutBoxMarginLeft(value: string) {
-        if (this.outBoxElement != null) {
-          this.outBoxElementOnResize = false
-          this.outBoxElement!.style.setProperty("margin-left", value)
-        }
+      },
+      //自动化测试专用
+      setOutBoxMarginLeft(value : string) {
+        if (this.outBoxElement != null) {
+          this.outBoxElementOnResize = false
+          this.outBoxElement!.style.setProperty("margin-left", value)
+        }
       },
       toggleDisplay() {
         this.boxDisplay = !this.boxDisplay
@@ -108,6 +111,15 @@
           "contentBoxSize: \n{blockSize:" + contentBoxSize.blockSize + ", inlineSize:" + contentBoxSize.inlineSize + "}\n" +
           "devicePixelContentBoxSize: \n{blockSize:" + devicePixelContentBoxSize.blockSize + ", inlineSize:" + devicePixelContentBoxSize.inlineSize + "}\n" +
           "contentRect: \n{x:" + entry.contentRect.x + ", y:" + entry.contentRect.y + ", width:" + entry.contentRect.width + ", height:" + entry.contentRect.height + "}"
+      },
+      cancelListen(){
+        // this.resizeObserver?.unobserve()
+        this.resizeObserver!.unobserve(this.outBoxElement!)
+        this.resizeObserver!.unobserve(this.innerBoxElement!)
+      },
+      goOnListen(){
+        this.resizeObserver!.observe(this.outBoxElement!)
+        this.resizeObserver!.observe(this.innerBoxElement!)
       }
     }
   }
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index e59a5be7..1ba05d1a 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -172,12 +172,10 @@
                 api: ["Element.takeSnapshot"]
               },
               // #endif
-              // #ifdef APP-ANDROID || WEB
               {
                 name: 'element大小变化监听',
                 url: 'resize-observer'
               },
-              // #endif
               {
                 name: 'node节点',
                 url: 'nodes-info',
-- 
GitLab