問題描述：

最近的做了個客服聊天的功能，遇到一個問題如下：
在手機上點擊聊天頁底部的input框后，鍵盤彈起同時頁面會整體上移，標題欄被頂上去了。如下圖：

問題分析：

input 獲取焦點時會自動調起手機鍵盤，設置 :adjust-position="true"，會導致鍵盤彈起時頁面整體上移

解決思路：

設置使鍵盤彈起使頁面不上移

設置輸入框所在盒子為絕對定位

鍵盤彈起時獲取鍵盤高度

設置輸入框所在盒子的bottom的鍵盤高度

解決方案：

注意：我這里是將消息輸入部分封裝成了組件，引入到它所在的 view 里的，所以需要將鍵盤高度子傳父傳值給它所在的盒子，如果是在同一個文件中的話直接將獲取到的鍵盤高度賦值給 bottom 就可以。

1. input

<inputclass="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 值為0this.$emit('changeBottomVal', 0)} }

2. input 所在的盒子:

<view v-if="showChat" class="message-input" :style="{ bottom: bottomVal }"><TUI-message-input id="message-input" ref="messageInput" :conversation="conversation" @sendMessage="sendMessage" @changeBottomVal="changeBottomVal"/> </view> data() {return {bottomVal: ''} } methods: {changeBottomVal(val) {this.bottomVal = val} } .message-input {flex-shrink: 0;width: 100%;position: absolute; // input 所在盒子設置絕對定位left: 0;bottom: 0; // 默認 0z-index: 199; }

總結：

由于獲取的系統的尺寸單位都是 px ，給 bottom 設置的值單位也一定要是 px ! 不能因為是手機端就用 rpx，2倍的 rpx 也不可以，因為并不是每個手機分辨率都是我們設計圖上375的2倍，一定要用 px 啊！！！

總結

以上是生活随笔為你收集整理的解决uni-app微信小程序input输入框在底部时，键盘弹起页面整体上移问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。