uni.onWindowResize 监听窗口尺寸变化事件详讲

uni.onWindowResize 监听窗口尺寸变化事件

官方介绍是监听窗口尺寸变化事件（1.6.0 新增），听起来只能监听一下页面的宽高，实际上在 uniapp 中可以用 uni.onWindowResize(CALLBACK) 事件监听到页面的屏幕宽高和当前设备的横竖屏状态

官方文档：uni.onWindowResize(CALLBACK)

PS：本文会比官方文档更详细

---

uni.onWindowResize(CALLBACK)

监听窗口尺寸变化事件（1.6.0 新增）

各平台支持说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	飞书小程序
√	√	√	x	x	x	√

CALLBACK 参数说明

属性	类型	说明
size	Object	变化后的窗口的大小，单位为 px ，{windowWidth,windowHeight,screenHeight,screenWidth}
deviceOrientation	String	当前屏幕所处的状态，portrait 竖屏 landscape 横屏

官方代码示例

const windowResizeCallback = (res) => {
  console.log('变化后的窗口宽度=' + res.size.windowWidth)
  console.log('变化后的窗口高度=' + res.size.windowHeight)
}
uni.onWindowResize(windowResizeCallback)

个人示例代码

有一点需要注意的就是，uni.onWindowResize 必须放在 onShow() 里面，否则无法做到触发监听。即使是放在 onLoad() 里面，也是 undefined，必须在 onshow() 里面。

export default {
	data() {
		return {
			windowResizeCallback: '',
		}
	},
	onLoad(option) {},
	onShow() {
        // 声明回调函数是为了控制取消监听，不取消也可以直接写在函数内部就好
		this.windowResizeCallback = (res) => {
			console.log('onWindowResize', res);
		}
		uni.onWindowResize(this.windowResizeCallback);
	},
	methods: {}
}

TIPS

• 如App端设置软键盘弹出方式为adjustResize ，则在键盘弹出时，会触发此事件。

• 横竖屏切换时，会触发此事件：

  在小程序中会默认竖屏状态，开启横竖屏旋转需要在 pages.json 中进行配置:

  单页面配置旋转

  "pages": 
  [{
  	"path": "pages/tabBar/home/home",
  	"style": {
  		"navigationStyle": "custom",
  		"enablePullDownRefresh": true,
          "pageOrientation": "auto"
  	}
  }]
  

  全局页面配置旋转

  "globalStyle": {
  	"navigationBarTextStyle": "black",
  	"navigationBarBackgroundColor": "#ffffff",
  	"backgroundColor": "#ffffff",
      "pageOrientation": "auto"
  },
  

---

uni.offWindowResize(CALLBACK)

取消监听窗口尺寸变化事件（1.6.0 新增）

各平台支持情况

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序	飞书小程序
√	√	√	x	x	x	√

Tips

• CALLBACK为调用uni.onWindowResize时传入的CALLBACK

  也就是为什么在 uni.onWindowResize(CALLBACK) 上面要声明一个变量

代码示例

export default {
	data() {
		return {
			windowResizeCallback: '',
		}
	},
	onLoad(option) {},
	onShow() {
		this.windowResizeCallback = (res) => {
			console.log('onWindowResize', res);
		}
		uni.onWindowResize(this.windowResizeCallback);
        // 声明后就可以直接阻止事件触发了
        uni.offWindowResize(this.windowResizeCallback);
	},
	methods: {}
}