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

在前段时间做的微信小程序中（页面中下面是有默认的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)
  }