LQ博客 www.lqblogs.com
arrows
nav

vue 解决安卓手机键盘顶起绝对定位fixed值问题

作者:LQ 来源:原创 发布时间:2020-04-19 浏览量:860 评论:0 点赞:1

场景描述:

安卓手机APP的webview中点击H5页面input输入框,键盘弹起顶起了绝对定位fixed值模块区域,IOS测试正常。

解决方案:

通过监听屏幕高度的变化判断安卓键盘是否弹起,如果没有变化就显示绝对定位fixed值模块区域,反之则隐藏。


核心代码:

data () {
    return {
      docmHeight: document.documentElement.clientHeight,  //默认屏幕高度       
      realHeight:  0, //实时屏幕高度 
      showFooter: true, //显示底部fixed       
    }
  },
watch:{
    realHeight:function() {
        //如果默认高度大于实际高度则影藏,反之就显示
      if(this.docmHeight > this.realHeight){            
        this.showFooter = false        
      }else{            
        this.showFooter = true        
      }
    }
  },
mounted(){
    window.onresize = ()=>{
      return(()=>{                     
        // 实时屏幕高度                       
        this.realHeight = document.body.clientHeight         
      })()    
   } 
  },


总结与其他:

对于监听屏幕高度的变化,我们除了对绝对定位fixed值模块区域处理之外,还可以对输入框失去焦点做处理。我们都知道安卓手机收起键盘,并不会触发输入框失去焦点,而是需要我们再去单独点击页面其他地方触发失去焦点。因此,我们可以通过监听屏幕高度的变化,来进一步优化此种场景处理。


webview fixed Vue
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(1)
打赏
倒踩(0)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(860)
讨论本篇文章(0)
发表评论

最多访问文章

最新文章