uniapp微信小程序如何实现页面不顶起且输入框紧贴键盘？2025年最新解决方案

在uniapp开发的微信小程序中，如何实现页面不被键盘顶起，同时让输入框紧贴键盘？目前测试发现键盘弹出时页面会被顶起，导致输入框与键盘之间出现空白区域。求2025年最新的解决方案，最好能提供具体代码示例或配置方法。

2 回复

使用adjust-position="false"禁止页面顶起，结合cursor-spacing设置输入框与键盘间距。2025年推荐方案：

<input 
  adjust-position="false" 
  cursor-spacing="20"
/>

注意：需测试iOS/Android兼容性，部分机型需额外设置focus时机控制。


在2025年，UniApp微信小程序实现页面不顶起且输入框紧贴键盘的最新方案如下：

核心方案：使用 cursor-spacing 和调整布局结构

  1. 禁用页面自动调整

    {
  "pages": [{
    "path": "pages/chat/chat",
    "style": {
      "app-plus": {
        "softinputMode": "adjustPan"
      }
    }
  }]
}

  2. 关键代码实现

    <template>
  <view class="container">
    <!-- 页面内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 其他内容 -->
    </scroll-view>
    
    <!-- 底部输入框区域 -->
    <view class="input-area">
      <input 
        class="input"
        :cursor-spacing="cursorSpacing"
        :adjust-position="false"
        @focus="onInputFocus"
        @blur="onInputBlur"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cursorSpacing: 0,
      keyboardHeight: 0
    }
  },
  methods: {
    onInputFocus(e) {
      // 获取键盘高度
      this.keyboardHeight = e.detail.height
      // 设置光标间距为键盘高度
      this.cursorSpacing = this.keyboardHeight
      
      // 可选：手动调整输入框位置
      setTimeout(() => {
        uni.pageScrollTo({
          scrollTop: 99999,
          duration: 100
        })
      }, 100)
    },
    
    onInputBlur() {
      this.keyboardHeight = 0
      this.cursorSpacing = 0
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow-y: auto;
}

.input-area {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 10rpx;
  border-top: 1rpx solid #eee;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
}
</style>

2025年新增优化点：

  1. 使用 position: sticky 确保输入框始终在底部
  2. 结合 scroll-view 避免页面整体滚动
  3. 动态计算间距 适配不同机型键盘高度
  4. 添加过渡动画 提升用户体验

注意事项：

  • 测试不同机型兼容性
  • 考虑全面屏手机的安全区域
  • 在 pages.json 中正确配置页面样式

此方案能有效解决页面顶起问题，确保输入框始终紧贴键盘显示。

回到顶部