uniapp input tabbar跟随软键盘

要实现 uniapp 中输入框在 tabbar 上方，并且跟随软键盘的效果，可以按照以下步骤进行：

1. 在 App.vue 中设置全局的样式：

<style>
    .page {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .content {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 50px;
    }

    .tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
</style>

2. 在需要使用输入框的页面中，添加如下代码：

<template>
  <div class="page">
    <div class="content">
      <!-- 此处添加页面内容 -->
      <div style="height: 2000px;"></div>
    </div>
    <div class="tabbar">
      <!-- 此处添加 tabbar -->
    </div>
    <div style="position: fixed;bottom: 0;left: 0;right: 0;">
      <input type="text" placeholder="请输入内容" style="height: 50px;width: 100%;margin: 0;padding: 0;border: none;background-color: #f8f8f8;">
    </div>
  </div>
</template>

3. 在页面中添加软键盘弹起时的事件监听：

onShow() {
  uni.createSelectorQuery().select('input').boundingClientRect((rect) => {
    let windowHeight = uni.getSystemInfoSync().windowHeight
    let inputHeight = rect.height
    let tabbarHeight = 50 // 假设 tabbar 高度为 50px
    let contentHeight = windowHeight - inputHeight - tabbarHeight
    this.setData({
      contentHeight
    })
  }).exec()
}

4. 在页面中动态设置内容区域的高度：

<template>
  <div class="page">
    <div class="content" :style="`height: ${contentHeight}px`">
      <!-- 此处添加页面内容 -->
      <div style="height: 2000px;"></div>
    </div>
    <div class="tabbar">
      <!-- 此处添加 tabbar -->
    </div>
    <div style="position: fixed;bottom: 0;left: 0;right: 0;">
      <input type="text" placeholder="请输入内容" style="height: 50px;width: 100%;margin: 0;padding: 0;border: none;background-color: #f8f8f8;">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentHeight: 0
    }
  },
  onShow() {
    uni.createSelectorQuery().select('input').boundingClientRect((rect) => {
      let windowHeight = uni.getSystemInfoSync().windowHeight
      let inputHeight = rect.height
      let tabbarHeight = 50 // 假设 tabbar 高度为 50px
      let contentHeight = windowHeight - inputHeight - tabbarHeight
      this.contentHeight = contentHeight
    }).exec()
  }
}
</script>

这样就可以实现 uniapp 中输入框在 tabbar 上方，并且跟随软键盘的效果了。