UniResizeObserver

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

构造函数

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

构造函数

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

UniResizeObserver 的方法

disconnect()

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

observe(target)

监视指定 UniElement 大小变化

参数

名称	类型	必填	默认值	描述
target	UniElement	是	-	被监视的 UniElement

unobserve(target)

结束对指定的 UniElement 的监视

参数

名称	类型	必填	默认值	描述
target	UniElement	是	-	取消监视的 UniElement

UniResizeObserver 兼容性

Android	iOS	web
4.13	x	x

示例

hello uni-app 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>