免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: 移动端解决键盘弹出时底部fixed定位被顶上去 [打印本页]
作者: admin    时间: 2020-1-10 12:56
标题: 移动端解决键盘弹出时底部fixed定位被顶上去
移动端解决软键盘弹出时底部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. })

复制代码







欢迎光临 免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (https://ourphp.net/club/) Powered by Discuz! X3.2