update resize-observer.uvue

pages/API/resize-observer/resize-observer.uvue

@@ -2,8 +2,11 @@
   <view>
     <text>点击蓝色或红色方块区域会修改元素宽高</text>
     <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">
-				<view style="width: 80px; height: 80px; background-color: red; padding: 5px;" id="innerBox" @click="innerBoxClick"></view>
+      <view
+        style="width: 140px; height: 140px; background-color: blue; align-items: center; justify-content: center; padding: 5px;"
+        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>
@@ -31,38 +34,55 @@
         boxDisplay: true,
         outBoxElement: null as UniElement | null,
         innerBoxElement: null as UniElement | null,
+        resizeObserver: null as UniResizeObserver | null
       }
     },
+    onBackPress() : boolean {
+      if (this.resizeObserver != null) {
+        this.resizeObserver!.disconnect()
+      }
+      return false
+    },
     onShow() {
-			const resizeObserver = new UniResizeObserver((entries: Array<UniResizeObserverEntry>) => {
-				entries.forEach(entry =>{
-					if(entry.target == this.outBoxElement) {
+      if (this.resizeObserver == null) {
+        this.resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
+          entries.forEach(entry => {
+            if (entry.target == this.outBoxElement) {
               this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry)
-					} else if(entry.target == this.innerBoxElement) {
+            } else if (entry.target == this.innerBoxElement) {
               this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
             }
           })
         })
         this.outBoxElement = uni.getElementById("outBox")
-			resizeObserver.observe(this.outBoxElement)
+        if (this.outBoxElement != null) {
+          this.resizeObserver!.observe(this.outBoxElement)
+        }
         this.innerBoxElement = uni.getElementById("innerBox")
-			resizeObserver.observe(this.innerBoxElement)
+        if (this.innerBoxElement != null) {
+          this.resizeObserver!.observe(this.innerBoxElement)
+        }
+      }
     },
     methods: {
       innerBoxClick() {
-				this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth+this.offset)
-				this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth+this.offset)
+        if (this.innerBoxElement != null) {
+          this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth + this.offset)
+          this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth + this.offset)
+        }
       },
       outBoxClick() {
-				this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth+this.offset)
-				this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth+this.offset)
+        if (this.outBoxElement != null) {
+          this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth + this.offset)
+          this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth + this.offset)
+        }
       },
       revertBoxSize() {
-				if(this.outBoxElement != null) {
+        if (this.outBoxElement != null) {
           this.outBoxElement!.style.setProperty("width", "140px")
           this.outBoxElement!.style.setProperty("height", "140px")
         }
-				if(this.innerBoxElement != null) {
+        if (this.innerBoxElement != null) {
           this.innerBoxElement!.style.setProperty("width", "80px")
           this.innerBoxElement!.style.setProperty("height", "80px")
         }
@@ -70,14 +90,14 @@
       toggleDisplay() {
         this.boxDisplay = !this.boxDisplay
       },
-			analysisResizeObserverEntry(entry: UniResizeObserverEntry): string {
+      analysisResizeObserverEntry(entry : UniResizeObserverEntry) : string {
         const contentBoxSize = entry.contentBoxSize[0]
         const borderBoxSize = entry.borderBoxSize[0]
         const devicePixelContentBoxSize = entry.devicePixelContentBoxSize[0]
-				return "borderBoxSize: \n{blockSize:"+borderBoxSize.blockSize+", inlineSize:"+borderBoxSize.inlineSize+"}\n"+
-					   "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+"}"
+        return "borderBoxSize: \n{blockSize:" + borderBoxSize.blockSize + ", inlineSize:" + borderBoxSize.inlineSize + "}\n" +
+          "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 + "}"
       }
     }
   }
@@ -87,6 +107,7 @@
   .info-item {
     flex-direction: row;
   }
+
   .info-text {
     font-size: 14px;
   }