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

问题现象

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

问题原因

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

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

解决方案

核心思路

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

页面结构

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

Demo 代码

WXML:

<view class=\”page-wrapper\”>
<scroll-view scroll-y