uni-app 微信小程序部分手机密码输入时页面错位

更多关于uni-app 微信小程序部分手机密码输入时页面错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 1楼作者

备注：密码输入框呼出键盘会出现此问题

更多关于uni-app 微信小程序部分手机密码输入时页面错位的实战教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 2楼作者

检测出是手机存在这样问题。使用微信开发工具原始代码编写的input输入密码也会卡死！

可以去微信开发者社区反馈此问题

经检测：微信版本8.0.6会出现此问题。微信更新8.0.7已解决。其他版本和手机机型未测试(vivo iQOO7微信版本8.0.6会出现)

这是一个已知的微信小程序兼容性问题，主要出现在部分安卓机型（如vivo iQOO系列）上。当密码输入框获得焦点时，微信会触发安全键盘，导致页面布局被压缩或错位。

解决方案：

使用adjust-position属性 在input组件中添加adjust-position=false，阻止键盘弹出时页面自动调整：
```
<input type="password" adjust-position="false" />
```
固定页面高度 在页面容器上设置固定高度，避免被键盘挤压：
```
page {
    height: 100vh;
    overflow: hidden;
}
```

监听键盘高度变化 在onShow生命周期中监听键盘高度，动态调整布局：

onShow() {
    wx.onKeyboardHeightChange(res => {
        this.keyboardHeight = res.height;
    })
}

使用flex布局 确保主要容器使用flex布局，提高布局稳定性：

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}