标签：isIos console clientHeight ios showTabbar H5 弹出 挤上来 监听

• 这里的解决方法是安卓监听窗口高度，iOS监听文本块焦点，以实现隐藏与显示底部固定定位元素

// 以下为vue2的写法
// originHeight为窗口高度，当键盘弹出时，android手机会改变，监听变化控制下方固定按钮是否显示
// ios手机input框聚焦键盘弹出，键盘收起时，input框会失去焦点，因此给input框或者textarea框添加focus和blur事件，绑定searchFocus和searchBlur方法
data() {
  return {
    originHeight: 0,
    showTabbar: true
  }
}
mounted() {
  this.originHeight = document.documentElement.clientHeight || document.body.clientHeight
  window.addEventListener('resize', this.handleResize)
},
created() {
  this.initPage(this.unid)
},
destroyed() {
  window.removeEventListener('resize', this.handleResize)
  window.removeEventListener('scroll', this.scroll)
},
methods: {
  // 判断ios
  isIos() {
    var m = navigator.userAgent
    return /iP(hone|od|ad)/.test(m)
  },
  // ios使用，监听输入框聚焦
  searchFocus() {
    if (this.isIos()) {
      this.showTabbar = false
      console.log(this.showTabbar, 'ios隐藏底部栏')
    }
  },
  // ios使用，监听输入框失去焦点
  searchBlur() {
    if (this.isIos()) {
      this.showTabbar = true
      console.log(this.showTabbar, 'ios显示底部栏')
    }
  },
  // 安卓使用，监听键盘弹出，即窗口大小改变
  handleResize() {
    var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
    if (resizeHeight < this.originHeight) {
      // 当软键盘弹起，在此处操作
      if (!this.isIos()) {
        this.showTabbar = false
        console.log(this.showTabbar, '安卓隐藏底部栏')
      }
    } else {
      // 当软键盘收起，在此处操作
      if (!this.isIos()) {
        this.showTabbar = true
        console.log(this.showTabbar, '安卓显示底部栏')
      }
    }
  },

标签：isIos,console,clientHeight,ios,showTabbar,H5,弹出,挤上来,监听
来源： https://www.cnblogs.com/jia-zq/p/16659653.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。