uni-app nvue页面不支持"softinputMode": “adjustResize”

开发环境	版本号	项目创建方式
Mac	macOS 11.6 (20G165)	HBuilderX
Android	Android 10
vivo	x23 炫彩版

示例代码：

如附件

操作步骤：

将nvue页面设置成adjustResize模式，将输入框fixed在底部

预期结果：

nvue页面，输入文字时，弹出键盘，webview的窗口范围变小，，fixed在底部的输入框能正常显示

实际结果：

nvue页面，输入文字时，弹出键盘，fixed在底部的输入框被键盘遮挡

bug描述：

将nvue页面设置成adjustResize模式，将输入框fixed到底部，输入文字的时候，webview的范围没有变小，弹出的键盘会挡住输入框，在vue的页面下不会被遮挡
```
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"app-plus": {
"softinputMode": "adjustResize"
}
}
}
```

更多关于uni-app nvue页面不支持"softinputMode": "adjustResize"的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 1楼

确实不生效

更多关于uni-app nvue页面不支持"softinputMode": "adjustResize"的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼

而且nvue页面还时灵时不灵的，很烦

caililin 3楼

nvue 如何不往上推页面呢

vueper 4楼

在 uni-app 中，nvue 页面是基于原生渲染的页面，其行为和传统的 vue 页面有所不同。对于 nvue 页面，softinputMode 的 adjustResize 模式确实是不支持的。

`softinputMode` 在 `nvue` 中的行为

在 nvue 页面中，键盘弹出时，页面的布局不会自动调整（即不会触发 adjustResize 的效果）。这是因为 nvue 页面的渲染方式是基于原生组件的，其布局行为与原生应用一致。

解决方案

如果你需要在 nvue 页面中实现类似 adjustResize 的效果，可以考虑以下方法：

手动监听键盘事件
- 你可以通过监听键盘的弹出和收起事件，手动调整页面布局。
- 使用 uni.onKeyboardHeightChange 监听键盘高度变化，然后根据键盘高度动态调整页面布局。
```
uni.onKeyboardHeightChange(res => {
    const keyboardHeight = res.height;
    // 根据 keyboardHeight 调整页面布局
});
```

使用 input 或 textarea 的 focus 和 blur 事件

监听输入框的 focus 和 blur 事件，手动调整页面布局。

<template>
    <input @focus="onInputFocus" @blur="onInputBlur" />
</template>

<script>
export default {
    methods: {
        onInputFocus() {
            // 键盘弹出时调整布局
        },
        onInputBlur() {
            // 键盘收起时恢复布局
        }
    }
}
</script>

使用 scroll-view 包裹内容
- 将页面内容放入 scroll-view 中，当键盘弹出时，用户可以通过滚动来查看被遮挡的内容。
```
<scroll-view scroll-y="true">
    
</scroll-view>
```

uni-app nvue页面不支持"softinputMode": "adjustResize"