uni-app 输入框获取焦点后 自定义导航栏也会跟着往上跑

在uni-app中，如果你遇到了输入框获取焦点后自定义导航栏也跟着往上跑的问题，这通常是由于软键盘弹出导致页面布局重新调整（即键盘遮挡问题）。为了解决这个问题，你可以通过调整页面的布局和监听软键盘的弹出事件来固定自定义导航栏的位置。以下是一个简单的示例代码，展示了如何处理这种情况。

首先，确保你的pages.json中配置了自定义导航栏：

{
  "globalStyle": {
    "navigationStyle": "custom"
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

然后，在你的页面布局中，你可以设置一个固定的导航栏和一个可滚动的内容区域：

<template>
  <view class="container">
    <view class="custom-navbar">
      <!-- 自定义导航栏内容 -->
      <text>自定义导航栏</text>
    </view>
    <scroll-view scroll-y="true" class="content">
      <input class="input-box" @focus="handleFocus" @blur="handleBlur" placeholder="请输入内容" />
      <!-- 其他内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  methods: {
    handleFocus() {
      // 软键盘弹出时的处理，如果需要可以调整布局
      console.log('输入框获取焦点');
    },
    handleBlur() {
      // 软键盘收起时的处理
      console.log('输入框失去焦点');
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.custom-navbar {
  height: 44px; /* 自定义导航栏高度 */
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding-top: 44px; /* 确保内容不被导航栏遮挡 */
  overflow-y: auto;
}

.input-box {
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

在这个示例中，我们使用了position: sticky来固定自定义导航栏的位置，并通过设置padding-top在内容区域顶部留出空间，防止内容被导航栏遮挡。同时，监听输入框的focus和blur事件，以便在软键盘弹出和收起时执行相应的处理（尽管在这个示例中并未实际调整布局）。

如果你的页面布局较为复杂，或者需要更精细的控制，可以考虑使用uni-app提供的键盘高度监听API或者CSS的env变量来调整布局。