uniapp 聊天框置底，键盘弹出问题页面被顶问题

uniAPP 键盘弹出，页面内容被顶上去，解决办法

方法一、设置键盘模式

修改pages.json文件中，需要弹出键盘的页面的app-plus

"app-plus":{
	"softinputMode":"adjustResize"
}

参考博客链接：https://hacpai.com/article/1573783350069

方法二：通过动态修改页面的样式

---

键盘弹出将页面的样式向上顶出去键盘弹出的高度

可以在键盘弹出的时候获取键盘的高度，以及输入框距离顶部的距离，输入框所在标签距离顶部的距离

• 获取弹出的键盘的高度
• 获取输入输入框距离顶部的高度（视情况）
• 获取输入框所在标签距离顶部的高度（视情况）

tip:想法是在键盘弹出时，给顶部的标签设置一个动态的:style{padding-top:xxx+‘px’}，使得页面内容下滑

<!-- 顶部标签 -->
<view :style="{padding-top:top+'px'}">
	xxxxxx
</view>

			data(){
				return:{
					top:0
				}
			}
			//上部菜单软键盘弹出是top位置变化
			changeTop(){
				//获取屏幕高度
                const res = uni.getSystemInfoSync();
                console.log(res.model);//手机类型
                console.log(res.screenHeight);//屏幕高度
                console.log(res.windowWidth);//屏幕宽度
                console.log(res.windowHeight);//可用屏幕高度
                console.log(res.statusBarHeight);//状态栏高度
				//输入框距离顶部距离
				let inputNode = uni.createSelectorQuery().select(".chat_input")
				inputNode.boundingClientRect(data => {
					console.log("节点离页面顶部的距离为" + data.top);
					input_top = data.top;
				}).exec();
				//底部区域距离顶部距离
				let sendNode = uni.createSelectorQuery().select(".send_area")
				sendNode.boundingClientRect(data => {
					console.log("节点离页面顶部的距离为" + data.top);
					send_top = data.top;
				}).exec();
				//弹出键盘的高度
				uni.onKeyboardHeightChange(res => {
				  //res.height  键盘的高度
				  if(res.height>0){
					this.top=res.height-(input_top-send_top); 
					uni.pageScrollTo({
					    scrollTop: 0, 
					    duration: 300
					});
					this.closemenu();
				  }
				  if(res.height==0){
					  this.top = res.height;
					  uni.pageScrollTo({
					      scrollTop: 0,
					      duration: 300
					  });
				  }
				  console.log(this.top);
				  // this.closemenu();
				})
				
			}

ps:这种实现方式，在键盘弹出时，页面内容同时下滑，页面会闪一下，会有明显的滑动效果

两种方法的实现效果