解决移动端软键盘收起样式不复原的问题

本文探讨了在Android设备上使用Antd Tabs组件时,遇到软键盘收起后内容区域高度不复原的问题。作者分享了通过监听键盘收起事件,动态改变组件Key以触发重绘的解决方案,并邀请读者参与讨论更优解法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

业务场景:antd的Tabs标签页组件,在Android机上面使用的时候,当移动端的软键盘搜索完收起时会出现一个空白处,底部内容被遮挡了,标签页组件的内容区域的高度不复原的问题,如图所示:
在这里插入图片描述

网上大多数的解决方案就是使用dom.scrollTop(x,y)方法,通过监听界面的resize事件或者输入框失去焦点事件,让被遮挡的dom滚动到底部或者顶部,但是并不适用我本次的问题。
我的解决办法是通过监听Andoid手机盘的软键盘收起事件,改Tabs组件绑定一个key值,然后动态的改变Tabs组件的Key(利用react的diff算法),让Tabs组件重绘
在这里插入图片描述
在这里插入图片描述

通过这种方法就可以解决我这个业务场景的问题
如果其他大佬有更好的解决方案,欢迎一起讨论。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值