关于微信小程序中，解决有tabbar时，键盘弹起引起的空白区域问题

最新推荐文章于 2024-04-16 15:38:49 发布

原创最新推荐文章于 2024-04-16 15:38:49 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了微信小程序中键盘弹起导致的布局错位问题，提供了动态调整底部样式以适配键盘高度的解决方案，确保输入框和按钮在键盘弹起时正确显示。

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

在前段时间做的微信小程序中（页面中下面是有默认的tabbar），对于键盘弹起引发的问题，总是会出现下面的图1 跟图2 的情况。图1即多上弹大约一个键盘的高度（或者更小一点），图2则没有中间的空白区域，但是button按钮跟背景样式却并没有上移。

图1 出现空白区域

图2 样式未上移

图3 正确版

代码详见我的gitee码云

  <!-- 键盘弹起，但是输入框的样式没有生效 -->
  <!-- <view class="page-section" hidden="{{!focus}}">
    <view class="textarea-wrp">
      <textarea value="{{content}}" bindblur='hideInput' placeholder='{{placeholder}}' focus="{{focus}}"  bindinput='getCommentText' class="input_content" auto-height adjust-position/>
      <button type="primary" bindtap='sendComment' class="btn">发送</button>
    </view>
  </view> -->

  <!-- 弹起键盘最终版 -->
  <view class="page-section" hidden="{{!focus}}" style='bottom:{{height}}rpx'>
    <view class="textarea-wrp">
      <textarea value="{{content}}" bindfocus="inputFocus" bindblur='hideInput' placeholder='{{placeholder}}' focus="{{focus}}"  bindinput='getCommentText' bindconfirm='submit' class="input_content" auto-height adjust-position='{{false}}'/>
      <button type="primary" bindtap='sendComment' class="btn">发送</button>
    </view>
  </view>

对于样式没有弹起的情况，我对其整个<view>添加一个 style='bottom:{{height}}rpx' 样式，并在键盘弹起的时候，使用bindfocus="inputFocus"来动态获取height的值。

注意
1.style=‘bottom:{{height}}rpx’ 单位用rpx时，在后面要进行转换（详见下面获取tabbar高度的方法）
2.input的 adjust-position=’{{false}}'要用false

      inputFocus(e) {
        this.setData({
          height: e.detail.height 
        })
      }

这样获取的高度在没有导航栏tabbar的时候是正确显示的，可是我们界面的需求是需要tabbar的，进而就会出现上述图片1的情况，出现空白区域。而官方的文档中，并没有对tabbar的高度有明确的获取接口来得到这个tabbar的高度。

因此，我们需要通过页面组成部分来计算得到tabbar的高度，下面是整个页面的组成。

由此可见： tabbar = 屏幕 - 内容区域 - 状态栏 - 导航栏

在微信官方文档可以看到 wx.getSystemInfoSync() 可以得到上述的值

需要注意的是微信样式设为rpx，而 wx.getSystemInfoSync() 获取的值是px单位，则需要通过 750 / systemInfo.windowWidth 来得到不同手机键盘弹起的时候，rpx和px之间的缩放比例。

inputFocus(e) {
    let systemInfo = wx.getSystemInfoSync()
    // let tabbarHeight = systemInfo.screenHeight - systemInfo.statusBarHeight - systemInfo.windowHeight
    // console.log(tabbarHeight)

    // px转换到rpx的比例
    let Px2Ppx = 750 / systemInfo.windowWidth;
    console.log(Px2Ppx)
    // 状态栏的高度
    let rpxStatusHeight = systemInfo.statusBarHeight * Px2Ppx
    // 导航栏的高度
    let rpxNavHeight = 44 * Px2Ppx
    // 内容区的高度
    let rpxWindowHeight = systemInfo.windowHeight * Px2Ppx
    // 屏幕的高度
    let rpxScreentHeight = systemInfo.screenHeight * Px2Ppx
    // 底部tabBar的高度
    let tabBarHeight = rpxScreentHeight - rpxStatusHeight - rpxNavHeight - rpxWindowHeight
    console.log(tabBarHeight)
    console.log(e, '键盘弹起')
    this.setData({
      height: e.detail.height * Px2Ppx - tabBarHeight,
    })
    console.log(this.data.height)
  }