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

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

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

@keyboardheightchange eventhandle 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} 微信小程序基础库2.7.0+、App 3.1.0+

在代码中添加如下处理


    

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的重绘,导致软键盘所处区域在未显示完全时显示黑底。

你可能感兴趣的:(uni-app)