UniResizeObserver | uni-app-x

UniResizeObserver

UniResizeObserver 兼容性

UniResizeObserver 的方法

disconnect(): void

observe(target: UniElement): void

unobserve(target: UniElement): void

# UniResizeObserver

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

# UniResizeObserver 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
4.16	x	4.13	4.18	4.61

# 构造函数

名称

类型

必备

默认值

兼容性

描述

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

target

是

-

-

只读属性被监视的 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

target

是

-

-

只读属性被监视的 UniElement

# UniResizeObserver 的方法

# disconnect(): void

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

# disconnect 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
-	-	-	-	-

# 参见

# observe(target: UniElement): void

监视指定 UniElement 大小变化

# observe 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
-	-	-	-	-

# 参数

名称

类型

必填

默认值

兼容性

描述

target

是

-

被监视的 UniElement

# 参见

# unobserve(target: UniElement): void

结束对指定的 UniElement 的监视

# unobserve 兼容性

Web	微信小程序	Android	iOS	HarmonyOS
-	-	-	-	-

# 参数

名称

类型

必填

默认值

兼容性

描述

target

是

-

取消监视的 UniElement

# 参见

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<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>

<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 + "}"
      },
      cancelListen() {
        // this.resizeObserver?.unobserve()
        this.resizeObserver!.unobserve(this.outBoxElement!)
        this.resizeObserver!.unobserve(this.innerBoxElement!)
      },
      goOnListen() {
        this.resizeObserver!.observe(this.outBoxElement!)
        this.resizeObserver!.observe(this.innerBoxElement!)
      }
    }
  }
</script>

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

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

运营产品

uni-ad uni统计 uni发行 uni安全专题

开发者服务

问答社区开发者后台

技术文档

uni-app文档 uniCloud文档原生开发者支持文档 HBuilder文档

生态服务

插件市场 OAuth用户开放平台

关于我们： DCloud官网案例需求墙许可协议加入我们赞助我们

联系我们：商务合作：bd@dcloud.io 广告合作：uniad@dcloud.io

DCloud.io 数字天堂（北京）网络技术有限公司是

HTML5中国产业联盟发起单位

京公网安备：11010802035340号

国家信息安全等级保护三级，证书编号：11010813802-20001

本页导读

UniResizeObserver

UniResizeObserver 兼容性

UniResizeObserver 的方法

disconnect(): void

observe(target: UniElement): void

unobserve(target: UniElement): void