聊天中键盘弹起时上推页面造成顶部消息看不见解决方案

先简单搭建一下页面结构

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

:adjust-position="false"是禁止上推页面，但禁止之后会造成输入框被键盘覆盖。

这时候就需要给底部输入栏固定定位到键盘上方,定位bottom的值为键盘的高度。

<!-- 底部输入栏 -->
		<view class="input-box"  :class="{isPosition:isPosition}" :style="{bottom: keyboardHeight+'px'}">
             <input class="input"  :adjust-position="false" />
       </view>
      <!-- css --> 
      .isPosition {
			position: fixed;
			z-index: 99;
		}

中间聊天内容的高度为屏幕的高度- 底部输入栏的高度-键盘的高度

<!-- 消息列表 -->
	<scroll-view class="msg-list" scroll-y="true" :style={ height: msgListHeight }>
	</scroll-view>
<!-- ...... -->
<!-- 底部输入栏 -->
		<view class="input-box"  :class="{isPosition:isPosition}" :style="{bottom: keyboardHeight+'px'}">
             <input class="input" @focus="iptFocus"  :adjust-position="false" />
       </view>

// 獲取並設置屏幕高度
	getScree（）{
     uni.getSystemInfo({
		success: res => {
			this.screenHeight = res.windowHeight
			// 100为底部输入栏高度，单位rpx，需要先转成px
			this.msgListHeight = this.screenHeight - uni.upx2px(100)
		}
	})
}
          // 输入框聚焦
			iptFocus(type) {
				this.isPosition = true;
				let messageH = uni.createSelectorQuery().select(".msg-list");
				this.$nextTick(() => {
					messageH.boundingClientRect(data => {
						uni.onKeyboardHeightChange(res => {
							this.keyboardHeight = res.height;
							// 100为底部输入栏高度，单位rpx，需要先转成px
		                   this.msgListHeight = this.screenHeight - this.keyboardHeight - uni.upx2px(100)
						})
					}).exec()
				})
			},

总结一下：

1.去掉input自带的上推页面属性；
2.定位输入栏；
3.动态计算聊天消息的高度；