【uniapp】关于小程序输入框聚焦、失焦（输入法占位）的问题

聊天小程序，界面带有输入框，当输入框中聚焦后，底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下，输入框此时会被输入法覆盖掉。

以下是亲自实践，解决这个问题的方法：

一、小程序大概布局

<template>
	<view style="height: 100%; display: flex; flex-direction: column;">
		
		<!-- 自定义导航栏 -->
		<head-nav :navRedirectPage="navRedirectPage"></head-nav>
		
		<!-- 小程序界面内容 -->
		<view class="container" :style="containerStyle">
			<!-- 聊天界面内容 -->
			<scroll-view ref='list' :scroll-top="scrollTop" class="chat-container" :scroll-y="true"></scroll-view>
			
			<!-- 底部输入框 -->
			<view class="bottom-bar"  :style="bottom_autosize_style">
				<view class="input-view">
						<uv-textarea selectable="true" :cursor-spacing="20" v-model="inputText" :inputBorder="false" customStyle="overflow: scroll;max-height: 75px;border-width: 0px !important;background-color: #F7F7FC;margin-left: 12px;padding: 7px;"
			:adjust-position="false" :show-confirm-bar='false' @blur="inputBindBlur" :maxlength="500" autoHeight placeholder="请输入内容" @focus="inputBindFocus"></uv-textarea>					
					<button class="send-button" @click="sendMessage"
						:disabled="!inputText.trim().length>0 || sendDisabled">
						<image class="send-message" src="/static/v2/aichat/fasong.png" />
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

css样式表：

• 默认样式为：

	// 聊天窗口
	.chat-container {
		flex-grow: 1; // 窗口大小为可变
		overflow-y: auto;
	}

	// 底部输入框
	.bottom-bar {
			position: relative;
			display: flex;
			align-items: center;
			padding: 6px 13px 6px 13px;  // 主要是padding-bottom变化
	}

• 当焦点在输入框内时，需要调整内容：

// 聚焦方法
inputBindFocus(e){
	console.log('e.detail.height:', e.detail.height)
	 if (e.detail.height) {
		   this.bottom_autosize_style = "padding-bottom:" +  (e.detail.height + 6ssss) + "px;"
		   if (!this.showScrollToBottom) {
		   	this.scrollToBottom();
		   }
	  }
},
// 失焦方法
inputBindBlur(){
	// this.containerStyle = ' height:' + this.containerHeight + 'px;';
	this.bottom_autosize_style = ""
	if (!this.showScrollToBottom) {
		this.scrollToBottom();
	}
}

请注意 bottom_autosize_style 这个变量的变化，即可实现。