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:這種實現方式，在鍵盤彈出時，頁面內容同時下滑，頁面會閃一下，會有明顯的滑動效果

兩種方法的實現效果