uni-app微信小程序input輸入框頁面整體上移問題怎么解決

這篇“uni-app微信小程序input輸入框頁面整體上移問題怎么解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“uni-app微信小程序input輸入框頁面整體上移問題怎么解決”文章吧。

問題描述：

最近的做了個客服聊天的功能，遇到一個問題如下：
在手機上點擊聊天頁底部的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" :>
	<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;
}

以上就是關于“uni-app微信小程序input輸入框頁面整體上移問題怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。