uni-app——uni-app 小程序表单页面键盘弹起布局错乱问题

问题现象

表单页面点击输入框，键盘弹起后：

问题原因

当页面同时存在以下三个因素时，容易出现布局错乱：

scroll-view + float布局 + fixed定位 = 💥 冲突

1. scroll-view：内部滚动与 input 的 adjust-position 机制冲突
2. float 布局：影响后续元素的位置计算
3. fixed 按钮：在 scroll-view 内部导致滚动区域计算错误

解决方案

核心思路

使用flex 布局，将固定元素移到 scroll-view 外部。

页面结构

┌──────────────────────┐ │ page-wrapper │ ← flex容器, 100vh │ ┌────────────────┐ │ │ │ scroll-view │ │ ← flex:1, 可滚动 │ │ 表单内容 │ │ │ └────────────────┘ │ │ ┌────────────────┐ │ │ │ 底部按钮 │ │ ← 固定高度，不滚动 │ └────────────────┘ │ └──────────────────────┘

Demo 代码

WXML:

<viewclass="page-wrapper"><scroll-viewscroll-y