h5页面手机键盘弹起布局混乱的解决方法

最新推荐文章于 2023-08-15 05:00:00 发布

居然鼬个高手

最新推荐文章于 2023-08-15 05:00:00 发布

阅读量946

点赞数

文章标签： javascript uni-app

本文链接：https://blog.csdn.net/NY1007/article/details/131838453

版权

 mounted() {
    this.originHeight = document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 移除绑定的handleResize事件监听
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    isIos() {
      var m = navigator.userAgent
      var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      let result = isIos ? true : false
      return result
    },
    //ios中
    searchFocus() {
      if (this.isIos()) {
        this.showFooter = false
      }
    },
    //ios中
    searchBlur() {
      if (this.isIos()) {
        this.showFooter = true
      }
    },
    // adnroid中
    handleResize() {
      var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
      if (resizeHeight < this.originHeight) {
        if (!this.isIos()) {
          //当软键盘弹起，在此处操作
          this.showFooter = false
        }
      } else {
        //当软键盘收起，在此处操作
        if (!this.isIos()) {
          //当软键盘弹起，在此处操作
          this.showFooter = true
        }
      }
    },

showFooter控制input下面的页面的显示与隐藏