解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题

最新推荐文章于 2025-06-22 22:51:06 发布

梅花十三儿

最新推荐文章于 2025-06-22 22:51:06 发布

阅读量6.9k

点赞数 3

CC 4.0 BY-SA版权

文章标签：微信小程序 uni-app 小程序

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/128919611

本文主要解决了uni-app开发微信小程序时，input输入框获取焦点时页面整体上移的问题。通过键盘弹起时使底部输入框跟随上移，页面头部保持固定，聊天内容区域局部滚动。解决方案包括设置页面不下移、输入框绝对定位、获取并应用键盘高度等步骤，并强调了bottom属性值必须使用px单位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.存在的问题： 微信小程序聊天界面，当input 框获取焦点时会自动调起手机键盘，当键盘弹起时，会导致页面整体上移，页面头信息会消失不见。

二.需要实现的效果

1.键盘弹出时，底部的输入框跟随键盘上弹；
2.页面头固定在顶部不动; 3.聊天信息区域（即内容区）调整高度，该区域局部滚动;

效果图对比

三.解决思路

1.设置使键盘弹起使页面不上移；2.设置输入框所在盒子为绝对定位；3.键盘弹起时获取键盘高度；4.设置输入框所在盒子的bottom的键盘高度；5.清除输入框固定定位导致的浮动（在输入框盒子的上面盒子下方设置padding-bottom【高度与输入框相同】；或者在输入框所在盒子上面加一个块级元素【高度与输入框相同】）**注意：**我这里是将消息输入部分封装成了组件，引入到它所在的【view】里的，所以需要将键盘高度子传父传值给它所在的盒子，如果是在同一个文件中的话直接将获取到的键盘高度赋值给【bottom】就可以。#### 四.实现代码

1.子组件input

//子组件
<input class="TUI-message-input-area" :adjust-position="false" // 修改为 false，使键盘弹起页面不上移cursor-spacing="20"v-model="inputText" @input="onInputValueChange" maxlength="140" type="text"placeholder-class="input-placeholder" placeholder="请输入描述"@focus="inputBindFocus" // 添加获取焦点键盘弹起事件@blur="inputBindBlur"> // 添加失去焦点键盘隐藏事件 //重点在这里！！！一定要用 px！！！
methods: {inputBindFocus(e) {// 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值// 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 pxthis.$emit('changeBottomVal' ,  e.detail.height +'px') },inputBindBlur({// input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0 this.$emit('changeBottomVal', 0)},  }

2.父组件引用

<view style="height: 200rpx;"></view>/**清除浮动**/
<view class="message-input " :style="{ bottom: bottomVal }">
<TUI-message-input ref="messageInput" :conversation="conversation" :isOrder="true" 
 @handleCall="handleCall" @sendMessage="sendMessage" @changeBottomVal="changeBottomVal">
</TUI-message-input>
</view>

<script> //引入输入框组件
import TUIMessageInput from "./components/chat/message-input/index";
export default {data() {return {bottomVal: '',}},

methods：{//键盘弹起事件changeBottomVal(val){this.bottomVal = val},
} </script>

<style lang="scss"> .message-input {position: absolute; // input 所在盒子设置绝对定位flex-shrink: 0;width: 100%;left: 0;bottom: 0;// 默认 0z-index: 199;padding-bottom: env(safe-area-inset-bottom);background: #FFFFFF;box-sizing: border-box;
	} </style>