uniapp input 上推固定如何实现

在uniapp开发中，如何实现input输入框上推页面时固定在底部？当键盘弹出时，input总是被顶起，有什么方法可以让input固定在屏幕底部不动？尝试过position: fixed但效果不理想，请问有没有更好的解决方案？

2 回复

在input外层包裹scroll-view，设置scroll-y并监听@scroll事件。当滚动时，通过动态样式固定input位置。或者使用position: fixed配合动态top值，结合页面滚动事件调整位置。


在 UniApp 中，实现输入框（input）上推固定（即输入时键盘弹出，输入框跟随键盘上移并固定在键盘上方）可以通过以下方法实现：

实现步骤

  1. 使用 focus 事件：监听输入框的聚焦事件，触发布局调整。
  2. 调整页面布局：通过动态样式或滚动，将输入框固定在键盘上方。
  3. 结合 uni.pageScrollTo：滚动页面确保输入框可见。

示例代码

<template>
  <view class="container">
    <!-- 其他内容 -->
    <view class="content" :style="{ paddingBottom: keyboardHeight + 'px' }">
      <!-- 页面内容 -->
    </view>
    <!-- 输入框固定在底部 -->
    <view class="input-container" :style="{ bottom: keyboardHeight + 'px' }">
      <input 
        v-model="inputValue" 
        @focus="onInputFocus" 
        @blur="onInputBlur" 
        placeholder="请输入内容" 
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      keyboardHeight: 0 // 键盘高度
    };
  },
  methods: {
    onInputFocus(e) {
      // 获取键盘高度（部分平台支持）
      uni.onKeyboardHeightChange(res => {
        this.keyboardHeight = res.height;
      });
      // 滚动到输入框位置（可选）
      uni.pageScrollTo({
        scrollTop: 1000, // 根据实际布局调整
        duration: 300
      });
    },
    onInputBlur() {
      this.keyboardHeight = 0; // 键盘收起时恢复
    }
  }
};
</script>

<style>
.container {
  position: relative;
  height: 100vh;
}
.content {
  /* 页面内容样式 */
}
.input-container {
  position: fixed;
  left: 0;
  right: 0;
  background: #fff;
  padding: 10px;
  border-top: 1px solid #eee;
  transition: bottom 0.3s;
}
</style>

注意事项

  • 平台差异：Android 和 iOS 对键盘事件的处理可能不同，需测试兼容性。
  • 键盘高度：uni.onKeyboardHeightChange 可能在某些平台不生效，可默认设置一个高度（如 300px）。
  • 滚动优化：通过 pageScrollTo 调整滚动位置，避免输入框被键盘遮挡。

替代方案

如果上述方法不理想，可使用 uni-app 官方插件或第三方组件（如 uView 的 input 组件）简化实现。

以上方法能基本实现输入框上推固定效果，根据实际需求调整细节即可。

回到顶部