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

当点击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()方法,底部会有一个短暂的”空档期“。
个人觉得这种处理方式多少会影响到页面的美观,所在开发过程中,放弃使用该方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容