uni-app ios软键盘弹出页面底部出现白条

uni-app ios软键盘弹出页面底部出现白条

开发环境 版本号 项目创建方式
HBuilderX 3.2.0 云端

操作步骤：

    // "softinput": {  
    //  "navBar": "none",  
    //  "auxiliary": false,  
    //  "mode": "adjustResize"  
    // },

预期结果：

    // "softinput": {  
    //  "navBar": "none",  
    //  "auxiliary": false,  
    //  "mode": "adjustResize"  
    // },

实际结果：

    // "softinput": {  
    //  "navBar": "none",  
    //  "auxiliary": false,  
    //  "mode": "adjustResize"  
    // },

bug描述：

如题：不光是 12 mini 7 plus 也这样，找了半天才发现是在 manifest 的 Plus 里设置了

// "softinput": {  
//  "navBar": "none",  
//  "auxiliary": false,  
//  "mode": "adjustResize"  
// },

更多关于uni-app ios软键盘弹出页面底部出现白条的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

知道是啥东西了，是ios软键盘的导航条，因为 “navBar”: “none” 设置了 none 所有，导航条不显示但是高度没有去掉。

更多关于uni-app ios软键盘弹出页面底部出现白条的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题复现，将会排查处理，已加分，感谢您的反馈！

这个是系统 webview 自动偏移出来的位置，无法修改，这个页面建议你使用 nvue 实现，或者不隐藏 navBar

您好，请问 nvue 怎么实现？现在已经不隐藏 navBar 了。

这是一个iOS软键盘弹出时的常见问题。在uni-app中，当软键盘弹出时，页面底部出现白条通常是由于页面布局计算问题导致的。

解决方案：

  1. 检查manifest.json中的softinput配置，建议使用"mode": “adjustPan"替代"adjustResize”：
"softinput": {
    "mode": "adjustPan"
}
  1. 在页面样式中添加：
page {
    height: 100%;
    overflow: hidden;
}
  1. 对于特定页面，可以使用uni.onKeyboardHeightChange监听键盘高度变化，动态调整布局：
uni.onKeyboardHeightChange(res => {
    console.log(res.height)
})
回到顶部