美文网首页
uni-app 解决软键盘顶起选项卡问题

uni-app 解决软键盘顶起选项卡问题

作者: 流浪的三鮮餡 | 来源:发表于2019-04-02 19:15 被阅读0次

当点击input输入框时,手机的输入法软键盘会把定位到底部的选项卡(tabbar)给顶起来,影响页面美观。

解决方法

在uni-app的manifest.json配置文件中,可配置设置项,固定选项卡(tabbar)至底部不被软键盘弹起。这里的固定选项卡(tabbar)是将tabbar固定在屏幕底部,不会随手机软键盘的弹出而移动,并不是真的隐藏tabbar
具体配置如下:

{
"app-plus":{
  "softinput" : {
            "mode" : "adjustPan"
        }
  }
}

配置 softinput->mode 设置为 adjustPan,注意仅打包后生效

关于uni.hidetabbar() 方法

使用uni.hidetabbar()可以隐藏选项卡(tabbar),同样,使用uni.showtabbar()可以把已经隐藏的选项卡(tabbar)显示出来。
手机软键盘弹出时,执行uni.hidetabbar()方法隐藏选项卡(tabbar),但是当手机软键盘收回时,执行uni.showtabbar()方法显示选项卡(tabbar)会随着软键盘一同”下落“,直至软键盘完全收回。如果选择当软键盘完全收回时执行uni.showtabbar()方法,底部会有一个短暂的”空档期“。
个人觉得这种处理方式多少会影响到页面的美观,所在开发过程中,放弃使用该方法。

相关文章

网友评论

      本文标题:uni-app 解决软键盘顶起选项卡问题

      本文链接:https://www.haomeiwen.com/subject/bilnbqtx.html