解決uni-app微信小程式input輸入框在底部時,鍵盤彈起頁面整體上移問題

2022-08-19 14:01:08

問題描述：

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

問題分析：

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

解決思路：

設定使鍵盤彈起使頁面不上移
設定輸入框所在盒子為絕對定位
鍵盤彈起時獲取鍵盤高度
設定輸入框所在盒子的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 至關重要!!! 我搜到的很多解決方案都沒有說這裡要新增 px
		this.$emit('changeBottomVal',  e.detail.height + 'px')
	},
   
	inputBindBlur() {
		// input 失去焦點，鍵盤隱藏，設定 input 所在盒子的 bottom 值為0
		this.$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; // 預設 0
	z-index: 199;
}

總結：

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

到此這篇關於解決uni-app微信小程式input輸入框在底部時，鍵盤彈起頁面整體上移問題的文章就介紹到這了,更多相關uni-app微信小程式input輸入框內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

解決uni-app微信小程式input輸入框在底部時,鍵盤彈起頁面整體上移問題

目錄

問題描述：

問題分析：

解決思路：

重點在這裡！！！我踩坑被折磨很久的一個地方！！！一定要用 px！！！

總結：

熱門文章