快捷導(dǎo)航

解決uni-app微信小程序input輸入框在底部時(shí),鍵盤(pán)彈起頁(yè)面整體上移問(wèn)題

更新時(shí)間：2022年08月19日 11:36:54 作者：葉子_o

問(wèn)題是這樣的input?獲取焦點(diǎn)時(shí)會(huì)自動(dòng)調(diào)起手機(jī)鍵盤(pán)，設(shè)置?:adjust-position="true"，會(huì)導(dǎo)致鍵盤(pán)彈起時(shí)頁(yè)面整體上移，這篇文章主要介紹了解決uni-app微信小程序input輸入框在底部時(shí)，鍵盤(pán)彈起頁(yè)面整體上移問(wèn)題,，需要的朋友可以參考下

問(wèn)題描述：

最近的做了個(gè)客服聊天的功能，遇到一個(gè)問(wèn)題如下：
在手機(jī)上點(diǎn)擊聊天頁(yè)底部的input框后，鍵盤(pán)彈起同時(shí)頁(yè)面會(huì)整體上移，標(biāo)題欄被頂上去了。如下圖：

問(wèn)題分析：

input 獲取焦點(diǎn)時(shí)會(huì)自動(dòng)調(diào)起手機(jī)鍵盤(pán)，設(shè)置 :adjust-position="true"，會(huì)導(dǎo)致鍵盤(pán)彈起時(shí)頁(yè)面整體上移

解決思路：

設(shè)置使鍵盤(pán)彈起使頁(yè)面不上移
設(shè)置輸入框所在盒子為絕對(duì)定位
鍵盤(pán)彈起時(shí)獲取鍵盤(pán)高度
設(shè)置輸入框所在盒子的bottom的鍵盤(pán)高度

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

1. input

<input
	class="TUI-message-input-area"
	:adjust-position="false"  // 修改為 false，使鍵盤(pán)彈起頁(yè)面不上移
	cursor-spacing="20"
	v-model="inputText"
	@input="onInputValueChange"
	maxlength="140"
	type="text"
	placeholder-class="input-placeholder"
	placeholder="說(shuō)點(diǎn)什么呢~"
	@focus="inputBindFocus" // 添加獲取焦點(diǎn)鍵盤(pán)彈起事件
	@blur="inputBindBlur" // 添加失去焦點(diǎn)鍵盤(pán)隱藏事件
/>

重點(diǎn)在這里！??！我踩坑被折磨很久的一個(gè)地方?。?！一定要用 px！??！

methods: {
	inputBindFocus(e) {
		// 獲取手機(jī)鍵盤(pán)的高度，賦值給input 所在盒子的 bottom 值
		// 注意!!! 這里的 px 至關(guān)重要!!! 我搜到的很多解決方案都沒(méi)有說(shuō)這里要添加 px
		this.$emit('changeBottomVal',  e.detail.height + 'px')
	},
   
	inputBindBlur() {
		// input 失去焦點(diǎn)，鍵盤(pán)隱藏，設(shè)置 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 所在盒子設(shè)置絕對(duì)定位
	left: 0;
	bottom: 0; // 默認(rèn) 0
	z-index: 199;
}

總結(jié)：

由于獲取的系統(tǒng)的尺寸單位都是 px ，給 bottom 設(shè)置的值單位也一定要是 px ! 不能因?yàn)槭鞘謾C(jī)端就用 rpx，2倍的 rpx 也不可以，因?yàn)椴⒉皇敲總€(gè)手機(jī)分辨率都是我們?cè)O(shè)計(jì)圖上375的2倍，一定要用 px ?。。?！

到此這篇關(guān)于解決uni-app微信小程序input輸入框在底部時(shí)，鍵盤(pán)彈起頁(yè)面整體上移問(wèn)題的文章就介紹到這了,更多相關(guān)uni-app微信小程序input輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: