新增 resize-observer 监听元素大小变化示例

pages.json

@@ -1279,7 +1279,16 @@
         "navigationBarTitleText" : "",
         "backgroundColorContent": "#fffae8"
       }
+    },
+    // #endif
+    // #ifdef APP-ANDROID
+    {
+      "path" : "pages/API/resize-observer/resize-observer",
+      "style" :
+      {
+        "navigationBarTitleText" : "resize0bserver"
       }
+    },
     // #endif
   ],
   "globalStyle": {

pages/API/resize-observer/resize-observer.test.js

+describe('api-resize-observer', () => {
+  if (!process.env.uniTestPlatformInfo.startsWith('android')) {
+    it('dummyTest', async () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/API/resize-observer/resize-observer')
+    await page.waitFor('button')
+  })
+
+  it('check_resize-observer', async () => {
+    await page.waitFor(600)
+    const image = await program.screenshot();
+    expect(image).toSaveImageSnapshot();
+  })
+})

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

+<template>
+	<view>
+		<text>点击蓝色或红色方块区域会修改元素宽高</text>
+		<view 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>
+		</view>
+		<button @click="revertBoxSize">还原修改前元素宽高</button>
+		<view>
+			<text class="info-text">蓝色方块元素:</text>
+			<view class="info-item">
+			  <text class="info-text">{{outBoxSizeInfo}}</text>
+			</view>
+			<text class="info-text" style="margin-top: 20px;">红色方块元素:</text>
+			<view class="info-item">
+			  <text class="info-text">{{innerBoxSizeInfo}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				outBoxSizeInfo: "",
+				innerBoxSizeInfo: "",
+				offset: 2,
+				outBoxElement: null as UniElement | null,
+				innerBoxElement: null as UniElement | null,
+			}
+		},
+		onShow() {
+			const 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) {
+						this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
+					}
+				})
+			})
+			this.outBoxElement = uni.getElementById("outBox")
+			resizeObserver.observe(this.outBoxElement)
+			this.innerBoxElement = uni.getElementById("innerBox")
+			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)
+			},
+			outBoxClick() {
+				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) {
+					this.outBoxElement!.style.setProperty("width", "140px")
+					this.outBoxElement!.style.setProperty("height", "140px")
+				}
+				if(this.innerBoxElement != null) {
+					this.innerBoxElement!.style.setProperty("width", "80px")
+					this.innerBoxElement!.style.setProperty("height", "80px")
+				}
+			},
+			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+"}"
+			}
+		}
+	}
+</script>
+
+<style>
+ .info-item {
+    flex-direction: row;
+  }
+  .info-text {
+	  font-size: 14px;
+  }
+</style>

pages/tabBar/API.uvue

@@ -160,6 +160,12 @@
                 api: ["Element.takeSnapshot"]
               },
               // #endif
+              // #ifdef APP-ANDROID
+              {
+                name: 'element大小变化监听',
+                url: 'resize-observer'
+              },
+              // #endif
               {
                 name: 'node节点',
                 url: 'nodes-info',