uniapp 弹出键盘的时候，按钮会被顶起一个键盘的高度

Question

uniapp 弹出键盘的时候，按钮会被顶起一个键盘的高度，有没有解决方案(目前好像出现比较多的是华为)

正常展示是这样

异常展示是这样

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 关键点分析：
   - 当uniapp页面中弹出键盘时，按钮被顶起，这是由于页面布局在键盘弹出时没有正确处理。
   - 不同手机厂商可能存在差异，这里提到华为手机出现此问题较多，可能与华为手机的系统设置和浏览器渲染机制有关。
2. 解决方案：
   - 使用uniapp的生命周期函数：
   • 在onReady生命周期函数中获取页面高度，并在键盘弹出和收起时动态调整页面元素的位置。
   • 示例代码如下：

export default {
  data() {
    return {
      pageHeight: 0,
      keyBoardHeight: 0
    };
  },
  onReady() {
    const query = uni.createSelectorQuery().in(this);
    query.select('page').boundingClientRect(data => {
      this.pageHeight = data.height;
    }).exec();
    uni.onKeyboardHeightChange(res => {
      this.keyBoardHeight = res.height;
      this.adjustPosition();
    });
  },
  methods: {
    adjustPosition() {
      // 调整按钮等元素的位置，这里简单示例将按钮的top值减去键盘高度
      const button = document.getElementById('yourButtonId');
      if (button) {
        button.style.top = (this.pageHeight - this.keyBoardHeight - button.offsetHeight) + 'px';
      }
    }
  }
};

• 使用flex布局：
  • 确保页面整体布局使用合适的flex布局，使页面元素能够自适应键盘弹出。
  • 例如：

<template>
  <view class="container">
    <view class="content">
      <!-- 页面内容 -->
    </view>
    <view class="button-area">
      <button id="yourButtonId">按钮</button>
    </view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1;
  overflow-y: auto;
}
.button-area {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 50px; /* 预留一些底部空间，防止按钮被键盘完全覆盖 */
}
</style>

1. 方案优缺点：
   - 生命周期函数方案：
   • 优点：
   • 可以精确获取键盘高度并动态调整元素位置，灵活性高。
   • 适用于各种复杂的页面布局场景。
   • 缺点：
   • 需要在代码中手动获取元素并调整样式，代码量相对较多。
   • 对于初次接触的开发者来说，理解和实现起来可能有一定难度。
   • flex布局方案：
   • 优点：
   • 利用flex布局的特性，代码相对简洁，易于理解和维护。
   • 对简单的页面布局能够快速实现自适应键盘弹出的效果。
   • 缺点：
   • 对于复杂的页面布局，可能无法完全满足需求，比如页面中有多层嵌套且布局复杂的情况。
   • 预留底部空间的方式可能不够精确，在某些情况下可能会出现按钮与键盘重叠或距离底部过远的问题。
2. 总结：
   - 针对uniapp弹出键盘时按钮被顶起的问题，可以通过生命周期函数动态获取键盘高度并调整元素位置，或者利用flex布局的特性来实现页面自适应。具体选择哪种方案可以根据项目的实际情况和页面布局的复杂程度来决定。如果页面布局较为简单，flex布局是一个不错的选择；如果需要更精确的控制，使用生命周期函数的方案会更好。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。