当前位置:   article > 正文

解决uniapp在App环境下输入框被软键盘遮挡的问题_uniapp系统输入按键挡着登录按钮

uniapp系统输入按键挡着登录按钮

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

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

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

在代码中添加如下处理

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

keyboardheightchange 方法

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

css样式

  1. .footer {
  2. position: fixed;
  3. bottom: 0;
  4. left: 0;
  5. }

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

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

  1. "app-plus": {
  2. "softinputMode": "adjustResize"
  3. }

  softinputMode共有两种模式:

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/113199?site
推荐阅读
相关标签
  

闽ICP备14008679号