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: {
}
}