H5端开发问题

uniapp开发H5页面时，操作按钮底部固定，点击输入框键盘弹起导致按钮位置上移，如下图

微信图片_20220224174107.png

微信图片_20220224174117.png

uniapp提供的方法不生效，个人解决方法是通过监听键盘是否弹起，如果弹起就隐藏掉操作按钮，方法如下

    <view class="bottom" v-if="show">
      <text @click="cancel">取消</text>
      <text @click="sure">立刻提交</text>
    </view>

export default {
  data() {
    return {
      show: true,
      defaultPhoneHeight: '', //屏幕默认高度
      nowPhoneHeight: '', //屏幕现在的高度
    }
  },
  watch: {
    //软键盘弹起事件
    nowPhoneHeight() {
      if (this.defaultPhoneHeight != this.nowPhoneHeight) {
        //手机键盘被唤起了。
        console.log('弹起');
        //写软键盘唤起你需要做的操作
        this.show = false
      } else {
        console.log('收起');
        //手机键盘被关闭了。
        //写软键盘关闭你需要做的操作
        this.show = true
      }
    }
  },
  mounted() {
    //监听软键盘获取当前屏幕高度的事件
    this.defaultPhoneHeight = window.innerHeight
    window.onresize = () => {
      this.nowPhoneHeight = window.innerHeight
    }
  },
  // 页面销毁一定要移除onresize时间
  beforeDestroy() {
    window.onresize = null
  },
}