收藏
回答

微信小程序底部textarea输入框,如何解决键盘弹起时页面整体上移问题?

微信小程序底部textarea输入框,如何解决键盘弹起时页面整体上移问题


回答关注问题邀请回答
收藏

2 个回答

  • 微盟
    微盟
    2023-08-09

    在微信小程序中,当键盘弹起时,会导致页面整体上移,可以通过监听键盘高度变化和调整页面布局来解决这个问题。以下是一种可能的解决方案:

    1. 在页面的JSON配置文件中,添加一个keyboardHeight的变量用于保存键盘高度:
    json
    
    Copy code
    {
      "usingComponents": {},
      "navigationBarTitleText": "页面标题",
      "keyboardHeight": 0
    }
    
    
    1. 在页面的WXML文件中,将textarea组件放在一个固定高度的容器中,并绑定键盘高度和输入框聚焦事件:
    html
    
    Copy code
    <view class="container" style="height: calc(100vh - {{keyboardHeight}}px)">
      <textarea bindfocus="onTextareaFocus" placeholder="请输入内容"></textarea>
    </view>
    
    
    1. 在页面的JS文件中,定义处理键盘高度和输入框聚焦事件的方法:
    javascript
    
    Copy code
    Page({
      data: {
        keyboardHeight: 0
      },
      onTextareaFocus: function(e) {
        const windowHeight = wx.getSystemInfoSync().windowHeight;
        const keyboardHeight = e.detail.height;
        const diffHeight = windowHeight - keyboardHeight;
        if (diffHeight < 0) {
          this.setData({
            keyboardHeight: Math.abs(diffHeight)
          });
        }
      }
    });
    
    
    1. 在页面的WXSS文件中,添加样式来处理页面整体上移的效果:
    css
    
    Copy code
    .container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }
    
    

    通过以上的处理,当输入框聚焦时,如果键盘高度超过了页面剩余高度(即窗口高度减去键盘高度小于0),则将键盘高度赋值给keyboardHeight变量,然后通过设置容器的高度来实现页面整体上移的效果。

    希望以上解决方案对你有帮助!


    2023-08-09
    有用 2
    回复
  • showms
    showms
    2023-08-09

    adjust-position 设置成false试试

    2023-08-09
    有用
    回复 2
    • Ding~
      Ding~
      2023-10-31
      页面确实不上移了 但是输入框被挡住了
      2023-10-31
      回复
    • 学会知足
      学会知足
      03-27
      是啊,怎么让键盘不覆盖输入框呢,想问一下你解决怎么bug了吗
      03-27
      回复
登录 后发表内容