uni-app 自定义navbar input adjustPosition=true键盘弹出后navbar消失

uni-app 自定义navbar input adjustPosition=true键盘弹出后navbar消失

开发环境 版本号 项目创建方式
Mac macOS 15.6 CLI

示例代码：

// 滑动到最后点击最后一个input  

<view>  
    <uni-nav-bar title="导航栏组件" fixed="top"/>  
    <input v-for="item in 60" :key="item" placeholder="请点击"/>  
</view>

更多关于uni-app 自定义navbar input adjustPosition=true键盘弹出后navbar消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

你好，请提供一下图片对比看效果来辅助说明，或者是提供一个可以运行的复现项目

更多关于uni-app 自定义navbar input adjustPosition=true键盘弹出后navbar消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


示例代码补上了

回复 wangmeng: 你说的navbar 消失是指的弹出界面之外，输入框失去焦点之后又重新回到正常位置是吗？

回复 DCloud_UNI_yuhe: 是的navbar被顶上去了

的确有这个问题，我也遇到了，若把softinputMode设置为adjustPan，则自定义导航栏会被顶上去，因为整个页面上推了，这没什么好说的。可是如果把softinputMode设置为adjustResize，又会出现窗体压缩，导致input被窗体滚动挡住，必须要手动上划（IOS端才有这个表现，让原生开发的同学测试了下，他们那边设置为adjustResize的时候就不会出现这种问题）尝试在键盘弹出时，使用uni.pageScrollTo手动滚动滚动条至input位置，又会出现需要延迟500ms以上才能生效的情况（应该是需要等待滚动条重新计算高度的原因）。目前进入了悖论，貌似除了使用原生导航栏没有任何办法，但原生导航又不能达到需求要求。。

回复 月影银翔: 你这属于正常的，要是既想要input还想显示navbar 可以尝试更改 input 的位置来显示

你们这框架觉得这是这是正常的？？ 这种幼儿园问题都没解决方案吗

在 uni-app 中，当 adjustPosition=true 时，键盘弹出会导致页面整体上移，而 fixed="top" 的导航栏会脱离文档流，因此可能被顶出可视区域。这是 iOS 和部分安卓设备的默认行为。

解决方案：

  1. 移除 adjustPosition
    将 adjustPosition 设为 false，键盘弹出时页面不会上移，导航栏保持原位：

    <input adjust-position="false" />

  2. 使用 CSS 固定导航栏
    即使页面上移，通过 position: fixed 和 z-index 确保导航栏始终置顶：

    .uni-nav-bar {
  position: fixed;
  top: 0;
  z-index: 9999;
}

  3. 监听键盘高度动态调整
    通过 uni.onKeyboardHeightChange 监听键盘高度，动态设置页面内边距：

    onLoad() {
  uni.onKeyboardHeightChange(res => {
    this.keyboardHeight = res.height;
  });
}

    在页面容器中添加底部内边距：

    <view :style="{ paddingBottom: keyboardHeight + 'px' }">
  <!-- 页面内容 -->
</view>

  4. 使用页面滚动替代整体上移
    将输入框放在 scroll-view 中，键盘弹出时仅滚动内容区域：

    <scroll-view scroll-y>
  <input v-for="item in 60" :key="item" placeholder="请点击"/>
</scroll-view>
回到顶部