uniapp在移动端软键盘监听(弹出,收起),及影响定位布局的问题

本文探讨了uniapp中移动端软键盘弹出和收起时,如何监听键盘高度变化以及由此引发的底部按钮定位问题。提出了三种解决方法,包括相对定位、输入框监听和键盘高度监听。同时,指出了键盘高度监听器在页面退出时可能存在的销毁问题,并提到了uniapp的`app-plus`配置项`softinputMode: adjustResize`和`adjustPan`的使用。文章还分享了2021年更新的解决方案,涉及pages.json配置以及输入框的`adjust-position`属性。
摘要由CSDN通过智能技术生成

参考:https://www.cnblogs.com/wangyihong/p/7514304.html

问题:通过绝对定位或者固定定位设置底部按钮,在虚拟键盘弹起时,底部按钮会被顶到虚拟键盘上方。

方法一:最简单的,给按钮使用相对定位,单按钮肯定无法固定在屏幕底部了,没人挑毛病就可凑合用。

方法二:还是绝对定位或固定定位,给输入框来个监听,@focus聚焦则隐藏按钮,@blur失焦则显示按钮。但是安卓手机,键盘收起时输入框不会立刻失焦,键盘完全收起后过几秒才失焦,有个时间差,这方法就不完美。

方法三:监听键盘的高度,uniapp里面提供了uni.onKeyboardHeightChange监听键盘高度的方法,在页面加载的时候创建监听器。如果把监听器放在@blur上,第一次失焦还是会有时间差的。这办法在页面显示上还是很完美的,but还是会有问题,根据uniapp社区里有人反馈,onKeyboardHeightChange这个监听器在页面退出的时候不会销毁,重新进入页面的时候还会再创建一个新的监听器,直到应用退出才销毁。好像说把hbuilder版本升级后这个bug会解决。

另:uniapp里还有个属性,官方文档:https://uniapp.dcloud.io/collocation/pages?id=app-plus

配置

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值