页面显示区域尺寸变化时触发。适用于半屏到全屏的拖动过渡、导航栏显隐等场景，用于根据尺寸变化做布局适配。
效果示意如下：
字段名称 | 字段类型 | 是否必传 | 说明 |
|---|---|---|---|
res | object | true | onResize 回调参数 |
size | object | true | 当前 webview 尺寸 |
windowWidth | number | true | 可使用窗口宽度，单位 px |
windowHeight | number | true | 可使用窗口高度，单位 px |
safeArea | object | true | 安全区域，与 xhs.getSystemInfoSync() 中 safeArea 含义一致 |
top | number | true | 安全区域上边界 |
bottom | number | true | 安全区域下边界 |
left | number | true | 安全区域左边界 |
right | number | true | 安全区域右边界 |
width | number | true | 安全区域宽度 |
height | number | true | 安全区域高度 |
interactive | boolean | true | 是否在拖动过程中 |
Page({
onResize(res) {
const { windowWidth, windowHeight } = res.size
const { top, bottom, left, right } = res.safeArea
// 根据新尺寸更新布局
this.setData({
viewHeight: windowHeight,
safeTop: top
})
// 拖动过程中可做动画过渡等
if (res.interactive) {
// 正在拖动...
}
}
})
{
"size": {
"windowWidth": 1920,
"windowHeight": 1080
},
"safeArea": {
"top": 24,
"left": 0,
"bottom": 0,
"right": 0,
"width": 1920,
"height": 1080
},
"interactive": "YES/NO"
}