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