uni-app制作聊天页面时，点击底部输入框弹出键盘上推页面问题解决方案

一，页面结构设计

先来看看聊天页面结构设计，外层布局如下：

<template>
	<view>
		<!-- 消息列表 -->
		<scroll-view class="msg-list" scroll-y="true">
		</scroll-view>
		
		<!-- 底部输入栏 -->
		<view class="input-box">
			<input :adjust-position="false"/>
		</view>
	</view>
</template>

之后底部这个输入栏，我们不要使用fixed定位，而是直接按照文档流排列，那如何让输入栏一直在最下面呢，这就是我们下一步操作啦。

注意：这里的input或者textarea需要设置一个:adjust-position="false"的属性，不然页面就会上推

二，定义消息列表高度

我们需要获取屏幕高度，然后使“消息列表”的高度为屏幕高度减去底部输入栏高度

<!-- ...... -->
	<!-- 消息列表 -->
	<scroll-view class="msg-list" scroll-y="true" :style={ height: msgListHeight }>
	</scroll-view>
<!-- ...... -->

// ......
onLoad() {
	// 獲取並設置屏幕高度
	uni.getSystemInfo({
		success: res => {
			this.screenHeight = res.windowHeight
			// 100为底部输入栏高度，单位rpx，需要先转成px
			this.msgListHeight = this.screenHeight - uni.upx2px(100)
		}
	})
}
// ......

三，监听键盘高度变化事件

下一步，需要监听键盘高度变化事件，并且动态设置消息列表高度

// ....
onReady() {
	// 监听键盘高度变化，以便设置输入框的高度
	uni.onKeyboardHeightChange(res => {
	    let keyBoardHeight = res.height
	    // 100为底部输入栏高度，单位rpx，需要先转成px
		this.msgListHeight = this.screenHeight - keyBoardHeight - uni.upx2px(100)
	})
},
// ....

四，优化

做到以上三步一般可以解决上面页面上推问题，剩下的就是不同项目不同的优化方案啦。