uniapp键盘撑起悬浮按钮

### UniApp 中键盘弹出时悬浮按钮被遮挡解决方案

在 UniApp 开发过程中，当软键盘弹出时可能会导致页面上的悬浮按钮或其他固定定位元素被遮挡。这主要是因为在 `adjustPan` 模式下，WebView 窗体高度保持不变，而整个页面会上移以确保当前焦点输入框不会被键盘覆盖[^1]。

#### 方案一：调整页面布局结构
通过修改页面的整体布局来适应不同状态下的显示需求。可以尝试将悬浮按钮放置在一个相对独立的容器内，并设置该容器的高度随窗口变化动态调整。这样即使键盘弹起也不会影响到悬浮按钮的位置。

<template>
  <view class="container">
    <!-- 输入区域 -->
    <input v-for="(item, index) in items" :key="index"></input>

    <!-- 悬浮按钮容器 -->
    <view class="floating-button-container">
      <button type="primary">点击</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  position: relative;
}

.floating-button-container {
  position: fixed; /* 或者 absolute */
  bottom: 20px;
  right: 20px;

  @media (min-height: calc(100vh - env(safe-area-inset-bottom))) and (-webkit-min-device-pixel-ratio: 2),
         screen and (orientation: portrait) {
    padding-bottom: constant(safe-area-inset-bottom); // iOS 11+
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>

#### 方案二：监听键盘事件并手动调整位置
利用 Vue 的生命周期钩子函数，在组件加载完成后绑定全局的键盘打开关闭事件监听器。每当检测到键盘动作发生时就重新计算悬浮按钮的新坐标值，并应用新的样式属性使其避开键盘范围。

export default {
  mounted() {
    const that = this;
    
    window.addEventListener('resize', function () { 
      setTimeout(() => {
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        
        if (!that.$refs.floatBtn) return;
          
        let floatButtonRect = that.$refs.floatBtn.getBoundingClientRect();
        let newTopPosition = windowHeight - floatButtonRect.height - 30; // 调整距离底部的距离
        
        Object.assign(that.$refs.floatBtn.style, {
          top: `${newTopPosition}px`,
          transitionDuration: '0.3s'
        });
      }, 100);
    });
  },
  
  beforeDestroy() {
    window.removeEventListener('resize');
  }
};

以上两种方法都可以有效解决由于软键盘弹出而导致的悬浮按钮不可见问题。具体采用哪种取决于实际应用场景和个人偏好。如果希望获得更好的用户体验，则建议结合两者优点综合考虑。