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 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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使用GD实现颜色渐变实例
2015/06/02 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
javascript动态加载二
2012/08/22 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
javascript基本算法汇总
2016/03/09 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
pandas的相关系数与协方差实例
2019/12/27 Python
python实现图片转字符画的完整代码
2021/02/21 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
骨干教师考核方案
2014/05/09 职场文书
给老婆的保证书
2015/01/16 职场文书
在职证明书模板
2015/06/15 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
财产分割协议书
2016/03/22 职场文书