vue 解决移动端弹出键盘导致页面fixed布局错乱的问题


Posted in Javascript onNovember 06, 2019

话不多说,直接上问题图片

vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面

网上搜到的解决方案有两种,

一种是监听页面高度(我采用的这种)

一种是监听软键盘事件(ios和安卓实现方式不同,未采用)

下面是实现代码

data() {
  return {
    docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
    showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
    hideshow:true //显示或者隐藏footer
  }
 },
watch: {
    //监听显示高度
   showHeight:function() {
     if(this.docmHeight > this.showHeight){
      //隐藏
       this.hideshow=false
     }else{
      //显示
       this.hideshow=true
     }
   }
 },
mounted() {
   //监听事件
   window.onresize = ()=>{
     return(()=>{
       this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
   })()
   }
 
 },
<div class="bottom" v-show="hideshow">
  <div class="btn">
   确认操作
  </div>
 </div>

我这里使用的是方法是:当键盘弹出时,将按钮隐藏。如果必须出现按钮的话,可以修改按钮回归到正常的流中。

以上这篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下checked取值问题的解决方法
Aug 09 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 #Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 #Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 #Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 #Javascript
vue点击页面空白处实现保存功能
Nov 06 #Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 #Javascript
微信小程序网络请求实现过程解析
Nov 06 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
django中的setting最佳配置小结
2017/11/21 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
大学生村官事迹材料
2014/01/21 职场文书
社会学专业求职信
2014/02/24 职场文书
《小池塘》教学反思
2014/02/28 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
处级干部考察材料
2014/12/24 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js