问题现象

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

问题原因

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

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:

<view class="page-wrapper">
  <scroll-view scroll-y class="scroll-area">
    <view class="form">
      <input placeholder="请输入姓名" cursor-spacing="120" />
      <input placeholder="请输入手机号" cursor-spacing="120" />
    </view>
  </scroll-view>
  <view class="footer">
    <button type="primary">提交</button>
  </view>
</view>

WXSS:

.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.scroll-area {
  flex: 1;
}

.footer {
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

关键配置

input 属性

<input cursor-spacing="120" adjust-position="true" />

• cursor-spacing: 光标与键盘距离，建议 100-150
• adjust-position: 键盘弹起时自动调整页面

清除浮动

如果表单有浮动元素，后续元素需清除：

.after-float-item {
  clear: both;
}

方案对比

总结

遇到表单页面键盘问题，记住三点：

1. 不要在 scroll-view 内用 fixed
2. 使用 flex 布局分割滚动区和固定区
3. 配置 cursor-spacing 保持输入框可见