解决uniapp在App环境下输入框被软键盘遮挡的问题

方法一：通过@keyboardheightchange事件获取软键盘高度，进行调整

以下为官方对keyboardheightchange事件的解释。

@keyboardheightchange

eventhandle

键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}

微信小程序基础库2.7.0+、App 3.1.0+

在代码中添加如下处理

<view class="footer" :style="{bottom: changeBottomVal}">
    <input @keyboardheightchange="keyboardheightchange"/>
</view>

keyboardheightchange 方法

keyboardheightchange(e){
	this.changeBottomVal = e.detail.height + 'px'
}

css样式

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
}

方法二：修改软键盘弹出模式，使用webview的高度变化，实现调整。

 在页面的pages.json中的style中做以下修改

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

  softinputMode共有两种模式：

• adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度
• adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住

  缺点：软键盘在弹出时会因为webview的重绘，导致软键盘所处区域在未显示完全时显示黑底。