问题现象
表单页面点击输入框,键盘弹起后:
| 平台 | 表现 |
|---|---|
| 安卓 | 输入框位置错位,光标飘到其他位置 |
| iOS | 键盘遮挡输入框,看不到输入内容 |
问题原因
当页面同时存在以下三个因素时,容易出现布局错乱:
scroll-view + float布局 + fixed定位 = 💥 冲突- scroll-view:内部滚动与 input 的 adjust-position 机制冲突
- float 布局:影响后续元素的位置计算
- fixed 按钮:在 scroll-view 内部导致滚动区域计算错误
解决方案
核心思路
使用flex 布局,将固定元素移到 scroll-view 外部。
页面结构
┌──────────────────────┐ │ page-wrapper │ ← flex容器, 100vh │ ┌────────────────┐ │ │ │ scroll-view │ │ ← flex:1, 可滚动 │ │ 表单内容 │ │ │ └────────────────┘ │ │ ┌────────────────┐ │ │ │ 底部按钮 │ │ ← 固定高度,不滚动 │ └────────────────┘ │ └──────────────────────┘Demo 代码
WXML:
<viewclass="page-wrapper"><scroll-viewscroll-y