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 maxlength文本字数限制插件
Apr 16 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
Nginx下配置codeigniter框架方法
2015/04/07 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
python算法学习之计数排序实例
2013/12/18 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
Django中使用locals()函数的技巧
2015/07/16 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
python实现简单图书管理系统
2019/11/22 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
讲座主持词
2014/03/20 职场文书
员工培训协议书
2014/09/15 职场文书
先进个人材料怎么写
2014/12/30 职场文书
投诉书格式范本
2015/07/02 职场文书
大学军训通讯稿
2015/07/18 职场文书
分家协议书范本
2016/03/22 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js