找回密码
 立即注册
即日起,论坛关闭新用户注册和登录,论坛相关的贴子保留查阅和下载。获得授权后,有技术问题可联系微信 13199509559 一对一解决。 2024-3-12
查看: 3951|回复: 0

移动端解决键盘弹出时底部fixed定位被顶上去

206

主题

206

主题

206

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
admin 发表于 2020-1-10 12:56:45 | 显示全部楼层 |阅读模式
移动端解决软键盘弹出时底部fixed定位被顶上去的问题

移动端页面的底部菜单栏,通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时,底部定位被顶上去,下面提供vue和jQuery两种解决办法。

vue.js代码
  1. <!--html部分-->
  2. <div class="footer" v-show="hideshow"></div>
复制代码
  1. // js 部分
  2. data(){
  3.   return {
  4.     docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
  5.         showHeight: document.documentElement.clientHeight,   //实时屏幕高度
  6.         hideshow:true,  //显示或者隐藏footer
  7.   }
  8. },
  9. mounted() {
  10.   // window.onresize监听页面高度的变化
  11.   window.onresize = ()=>{
  12.     return(()=>{
  13.       this.showHeight = document.body.clientHeight;
  14.     })()
  15.   }
  16. },
  17. //监听
  18. watch:{
  19.   showHeight:function() {
  20.     if(this.docmHeight > this.showHeight){
  21.       this.hideshow=false
  22.     }else{
  23.       this.hideshow=true
  24.     }
  25.   }
  26. },

复制代码
jQuery代码
  1. var winHeight = $(window).height();  //获取当前页面高度
  2. $(window).resize(function () {
  3.     var thisHeight = $(this).height();
  4.     if ( winHeight - thisHeight > 140 ) {
  5.         //键盘弹出
  6.         $('.footer').css('position','static');
  7.     } else {
  8.         //键盘收起
  9.         $('.footer').css({'position':'fixed','bottom':'0'});
  10.         
  11.     }
  12. })

复制代码



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表