苹果手机更新到最新版本时,软键盘弹起,导致出现空白区域是怎么导致的
使用input组件的adjust-position(键盘弹起时,是否自动上推页面)出现问题如何解决?在聊天室的场景的下和用户进行聊天, 有以下的场景: adjust-position 的属性为true 1、在聊天历史列表比较长,点击底部fixed 定位的输入框弹起手机键盘的时候,输入框上面的内容会自动向上推(涂黑部分是订单的卡片,也是聊天的历史)这个体验是可以接受的。 图一: [图片] 2、在聊天历史列表比较短的时候,点击键盘也会把内容会自动向上推 ,效果如下: 点击输入框之前: [图片] 点击输入框之后: [图片] 想到的解决方案: 能不能使用input组件的bindkeyboardheightchange(监听键盘高度变化)或者 bindfocus(聚焦)+bindblur(失去焦点) 获取键盘的高度来动态改变 adjust-position 属性的值来解决问题 过程: 这里 adjust-position 默认值分别设置两种情况: 一、.adjust-position: true 键盘弹起时,自动上推页面 1. 浏览历史长的时候不做处理,键盘唤起的时候,页面应该自动上推,体验正常 2.浏览历史比较短的时候,唤起键盘的时候, 这个需要计算浏览历史列表的安全距离 根据这个安全距离才能设置adjust-position 的开启,浏览历史的长度会有一个临界值 判断这个临界值,如果浏览历史的长度,小于临界值,则设置 adjust-position: false,唤起键盘不会向上推动页面 先测试只有一个聊天内容时候,第一次唤起键盘是如下的效果: [图片] 为什么还是会把页面的聊天内容挤上去,由于唤起键盘的时候,adjust-position 还是true 唤起键盘之后才能拿到键盘的高度,才能判断是否设置adjust-position为false. 点击第二次就正常了,由于点击第一次已经将adjust-position 设置为false,如图: [图片] 二、.adjust-position: false 键盘弹起时,不自动上推页面 1、聊天历史列表数据短的时候,就不测试了,效果和上图一样是正常的, 2、在聊天历史列表长的时候,在点击唤起键盘的时候,效果如下: [图片] 由于默认是 不自动上推页面 ,弹起键盘获取键盘高度的时候,adjust-position的值还是false 再点击第二次唤起键盘的时候,才能显示正常,如上面图一的截图。 造成这样原因归根到底是 在唤起键盘的时候,adjust-position的属性改变的操作是在 拿到键盘高度之后,键盘高度拿到之前界面就已经 被自动上推或者没有被推上去 第二次唤起键盘才能正常显示,不知道这种场景下如何解决,比如提早获取键盘的高度 计算出安全的聊天历史长度。希望各位大佬指导下。
2023-07-10