简体中文
用于监视 UniElement 元素的大小变化。它可以观察一个或多个
名称 | 类型 | 必备 | 默认值 | 描述 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
callback | (entries: Array<UniResizeObserverEntry>) => void | 是 | - | 每当监视的元素调整大小时,回调该函数 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
名称 | 类型 | 必备 | 默认值 | 描述 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
callback | (entries: Array<UniResizeObserverEntry>, observer: UniResizeObserver) => void | 是 | - | 每当监视的元素调整大小时,回调该函数 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
取消所有的对 UniElement 目标的监视
监视指定 UniElement 大小变化
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
target | UniElement | 是 | - | 被监视的 UniElement |
结束对指定的 UniElement 的监视
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
target | UniElement | 是 | - | 取消监视的 UniElement |
Android | iOS | web |
---|---|---|
4.13 | x | x |
该 API 不支持 Web,请运行 hello uni-app x 到 App 平台体验
<template>
<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>
</view>
<button @click="revertBoxSize">还原修改前元素宽高</button>
<button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</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,
boxDisplay: false,
outBoxElement: null as UniElement | null,
innerBoxElement: null as UniElement | null,
resizeObserver: null as UniResizeObserver | null,
outBoxElementOnResize: false
}
},
onBackPress() : boolean {
if (this.resizeObserver != null) {
this.resizeObserver!.disconnect()
}
return false
},
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.outBoxElementOnResize = true
} else if (entry.target == this.innerBoxElement) {
this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
}
})
})
this.outBoxElement = uni.getElementById("outBox")
if (this.outBoxElement != null) {
this.resizeObserver!.observe(this.outBoxElement!)
}
this.innerBoxElement = uni.getElementById("innerBox")
if (this.innerBoxElement != null) {
this.resizeObserver!.observe(this.innerBoxElement!)
}
this.boxDisplay = true
}
},
methods: {
innerBoxClick() {
if (this.innerBoxElement != null) {
this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth + this.offset + 'px')
this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth + this.offset + 'px')
}
},
outBoxClick() {
if (this.outBoxElement != null) {
this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth + this.offset + 'px')
this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth + this.offset + 'px')
}
},
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")
}
},
//自动化测试专用
setOutBoxMarginLeft(value: string) {
if (this.outBoxElement != null) {
this.outBoxElementOnResize = false
this.outBoxElement!.style.setProperty("margin-left", value)
}
},
toggleDisplay() {
this.boxDisplay = !this.boxDisplay
},
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>