UniResizeObserver

用于监视 UniElement 元素的大小变化。它可以观察一个或多个

构造函数

名称	类型	必备	默认值	兼容性	描述
callback	(entries: Array<UniResizeObserverEntry>) => void	是	-	-	每当监视的元素调整大小时，回调该函数
名称 类型 必备 默认值 兼容性 描述 borderBoxSize Array<UniBorderBoxSize> 是 - Web Android iOS 4.16 4.13 4.18 只读属性 包含被监视的元素带有边框box大小的数组。 名称 类型 必备 默认值 兼容性 描述 blockSize number 是 - - 只读属性，被监视元素含边框box的高度 inlineSize number 是 - - 只读属性，被监视元素含边框box的宽度 contentBoxSize Array<UniContentBoxSize> 是 - Web Android iOS 4.16 4.13 4.18 只读属性 包含被监视的元素内容box大小的数组。 名称 类型 必备 默认值 兼容性 描述 blockSize number 是 - - 只读属性，被监视元素内容box的高度 inlineSize number 是 - - 只读属性，被监视元素内容box的宽度 devicePixelContentBoxSize Array<UniDevicePixelContentBoxSize> 是 - Web Android iOS 4.16 4.13 4.18 只读属性 包含被监视的元素内容box设备像素大小的数组。 名称 类型 必备 默认值 兼容性 描述 blockSize number 是 - - 只读属性，被监视元素内容box的设备像素高度 inlineSize number 是 - - 只读属性，被监视元素内容box的设备像素宽度 contentRect DOMRect 是 - - 只读属性 包含被监视元素大小的DOMRect target UniElement 是 - - 只读属性 被监视的 UniElement

构造函数

名称	类型	必备	默认值	兼容性	描述
callback	(entries: Array<UniResizeObserverEntry>, observer: UniResizeObserver) => void	是	-	-	每当监视的元素调整大小时，回调该函数
名称 类型 必备 默认值 兼容性 描述 borderBoxSize Array<UniBorderBoxSize> 是 - Web Android iOS 4.16 4.13 4.18 只读属性 包含被监视的元素带有边框box大小的数组。 名称 类型 必备 默认值 兼容性 描述 blockSize number 是 - - 只读属性，被监视元素含边框box的高度 inlineSize number 是 - - 只读属性，被监视元素含边框box的宽度 contentBoxSize Array<UniContentBoxSize> 是 - Web Android iOS 4.16 4.13 4.18 只读属性 包含被监视的元素内容box大小的数组。 名称 类型 必备 默认值 兼容性 描述 blockSize number 是 - - 只读属性，被监视元素内容box的高度 inlineSize number 是 - - 只读属性，被监视元素内容box的宽度 devicePixelContentBoxSize Array<UniDevicePixelContentBoxSize> 是 - Web Android iOS 4.16 4.13 4.18 只读属性 包含被监视的元素内容box设备像素大小的数组。 名称 类型 必备 默认值 兼容性 描述 blockSize number 是 - - 只读属性，被监视元素内容box的设备像素高度 inlineSize number 是 - - 只读属性，被监视元素内容box的设备像素宽度 contentRect DOMRect 是 - - 只读属性 包含被监视元素大小的DOMRect target UniElement 是 - - 只读属性 被监视的 UniElement

UniResizeObserver 的方法

disconnect(): void

取消所有的对 UniElement 目标的监视

disconnect 兼容性

Web	Android	iOS
-	-	-

observe(target: UniElement): void

监视指定 UniElement 大小变化

参数

名称	类型	必填	默认值	兼容性	描述
target	UniElement	是	-	Web Android iOS 4.0 4.0 4.11	被监视的 UniElement

observe 兼容性

Web	Android	iOS
-	-	-

unobserve(target: UniElement): void

结束对指定的 UniElement 的监视

参数

名称	类型	必填	默认值	兼容性	描述
target	UniElement	是	-	Web Android iOS 4.0 4.0 4.11	取消监视的 UniElement

unobserve 兼容性

Web	Android	iOS
-	-	-

UniResizeObserver 兼容性

Web	Android	iOS
4.16	4.13	4.18

示例

hello uni-app x

扫码体验（手机浏览器跳转到App直达页）

扫码体验

Template

Script

<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>
    <button @click='cancelListen'>停止监听</button>
    <button @click='goOnListen'>恢复监听</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>



<style>
  .info-item {
    flex-direction: row;
  }

  .info-text {
    font-size: 14px;
  }
</style>