uni-app 微信小程序上，使用 onResize 监听不到手机底部的虚拟导航栏展开/收起时页面尺寸的变化

uni-app 微信小程序上，使用 onResize 监听不到手机底部的虚拟导航栏展开/收起时页面尺寸的变化

开发环境 版本号 项目创建方式
Windows 1803 HBuilderX 
产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：1803

HBuilderX类型：正式

HBuilderX版本号：3.0.7

第三方开发者工具版本号：1.05.2102010

基础库版本号：2.15.0

示例代码：

onResize() {
    try {
        const res = uni.getSystemInfoSync();
        this.windowHeight = res.windowHeight;
    } catch (e) {
        // error
    }
}

操作步骤：

微信小程序，展开/收起 虚拟导航栏

预期结果：

onResize能监听到页面尺寸变化

实际结果：

onResize未触发

bug描述：

微信小程序上，使用 onResize 监听不到手机底部的 虚拟导航栏 展开/收起时页面尺寸的变化

更多关于uni-app 微信小程序上，使用 onResize 监听不到手机底部的虚拟导航栏展开/收起时页面尺寸的变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

单独使用微信小程序（不使用 uni-app 测试一下），如果仍然存在问题，需要反馈到微信社区

更多关于uni-app 微信小程序上，使用 onResize 监听不到手机底部的虚拟导航栏展开/收起时页面尺寸的变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的。谢谢。麻烦再问一下，有没有什么方法可以实现在微信小程序，展开虚拟导航的时候，不会把页面往上推啊？就是说，虚拟导航展开的时候，只是盖在上面，不会造成页面尺寸变化

在微信小程序中，虚拟导航栏的展开/收起确实不会触发页面的onResize事件，这是微信小程序本身的限制。目前微信小程序的基础库并未将此场景纳入onResize的触发条件。

针对这个问题，可以考虑以下解决方案：

  1. 使用wx.onWindowResize替代（仅限微信小程序环境）：
wx.onWindowResize((res) => {
    this.windowHeight = res.windowHeight;
});
  1. 在页面onShow生命周期中主动获取窗口尺寸：
onShow() {
    const res = uni.getSystemInfoSync();
    this.windowHeight = res.windowHeight;
}
  1. 如果必须监听实时变化，可以设置定时器轮询（性能消耗较大）：
mounted() {
    this.resizeTimer = setInterval(() => {
        const res = uni.getSystemInfoSync();
        if(this.windowHeight !== res.windowHeight) {
            this.windowHeight = res.windowHeight;
        }
    }, 300);
},
beforeDestroy() {
    clearInterval(this.resizeTimer);
}
回到顶部