收藏
回答

使用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的属性改变的操作是在

拿到键盘高度之后,键盘高度拿到之前界面就已经 被自动上推或者没有被推上去

第二次唤起键盘才能正常显示,不知道这种场景下如何解决,比如提早获取键盘的高度

计算出安全的聊天历史长度。希望各位大佬指导下。


最后一次编辑于  2020-12-14
回答关注问题邀请回答
收藏

3 个回答

  • brave
    brave
    2020-12-14

    我做过的是评论框,逻辑大概是 textarea 设置 adjust-position 不自动上推页面,当 textarea focus时,bindfocus 回调内会有键盘高度 e.detail.height (需要注意的是电脑端由于不会有键盘弹起,判断 keyboardHeight = e.detail.height || 0 如果对基础库没啥限制的话,还是使用wx.onKeyboardHeightChange 获取好一点)

    textarea fixed布局,使用 transform: translate(0, {{-keyboardHeight}}px);

    此外,如果当前页面为tabBar页面,那么 keyboardHeight = e.detail.height - tabBar高度

    tabBar 高度计算:

    // 没有自定义导航栏使用这个逻辑计算
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
        let navBarHeight = (menuButtonInfo.top - res.statusBarHeight) * 2 + menuButtonInfo.height + res.statusBarHeight;
        this.data.tabbarHeight = res.screenHeight - res.windowHeight - navBarHeight;
        console.log(`tabbarHeight=${this.data.tabbarHeight}px`);
      }
    });
    
    // 自定义导航栏使用这个逻辑计算
    wx.getSystemInfo({
      success: res => {
    	this.data.tabbarHeight = res.screenHeight - res.windowHeight;
    	console.log(`tabbarHeight=${this.data.tabbarHeight}px`);
      }
    });
    


    以上给你个思路参考。

    2020-12-14
    有用 3
    回复 6
    • 永恒的爱
      永恒的爱
      2020-12-15
      这个方法和我描述的方法是类似,可是还是存在一个问题,就是当用户第一次唤起键盘的时候才能拿到键盘的高度,拿到高度进行计算的时候,页面的布局已经混乱了,就是想知道有没有方法,不用唤起键盘,也能拿到系统键盘高度的方法
      2020-12-15
      回复
    • brave
      brave
      发表于小程序端
      2020-12-15回复永恒的爱
      没有的,只有键盘弹出的时候才会有高度,而且这个高度你不能再获取第一次后就固定了
      2020-12-15
      回复
    • 永恒的爱
      永恒的爱
      2020-12-15
      嗯,暂时做不成跟微信聊天一样的体验
      2020-12-15
      回复
    • brave
      brave
      发表于小程序端
      2020-12-15回复永恒的爱
      嗯嗯如果有其他的逻辑实现 可以互相交流一下🤝
      2020-12-15
      回复
    • @
      @
      2天前回复永恒的爱
      我实现了,哈哈哈哈哈哈。我以前也以为实现不了,现在完全实现了
      2天前
      回复
    查看更多(1)
  • KoKo
    KoKo
    2021-08-02

    微信小程序做聊天窗口也遇到了同样的问题,没有最优的方案来解决这个问题,感觉官网应该优化一下这块。

    2021-08-02
    有用 1
    回复
  • LiuY
    LiuY
    2023-07-10

    苹果手机更新到最新版本时,软键盘弹起,导致出现空白区域是怎么导致的

    2023-07-10
    有用
    回复
登录 后发表内容
问题标签