Vue 在手机上键盘把底部菜单顶上去的解决方案

ios和安卓的键盘的区别

  • ios和安卓的键盘的区别弹起方式不同, ios直接弹出键盘, 不影响页面, 而安卓键盘弹起时会把页面顶起来, 这样就会把底部菜单顶起来了, 绝对定位也没用;

用了网上的一些方案,发现了一些不满意的地方

解决思路

  • 页面进来时获取一个可以监听屏幕高度的api,具体可以打开控制台输入window查看, 定义一个变量用来存储这个参数, 当实时屏幕高度小于此参数时时, 说明键盘弹起来了, 这时就隐藏底部菜单, 当键盘收起时, 再显示底部菜单;

遇到 2 个坑

  1. 开始我用了 Vue 获取 dom 的位置offsetTop,但在手机上,菜单顶上来了,dom的位置没有变化,原来offsetTop是绝对坐标

    • 查看了 window 的几个参数之后找到了一个 innerHeight
  2. 一个浏览器(Chrome)在上滑时,浏览器的导航栏会消失,这样会造成innerHeight 的变化(已解决)

具体代码实现

  • 这里用一个hidden 属性来控制

  • mui-barmui的一个组件,上面有行代码是position: flexd;,所以要去掉,不然hidden如果使用position: absolute;的话权重不够。所以给这两个属性用同一个参数来控制,当 hidden有时mui-bar

  • 有的同学说,mui-bar没了,样式变了。那就把mui-bar除了position: flexd;的全部复制到hidden

  • 废话不多说,上代码

部分html:

<nav ref="nav" :class="{'mui-bar':!this.ishigh, 'mui-bar-tab':true,'hidden': this.ishigh}"></nav>

css代码

  • 这里用了none ,有其他需求可以按需改,如position: absolute;
.hidden {
display: none;
}

JavaScript代码

    data() {
return{
ishigh: false,
docmHeight: 0,
showHeight: 0,
}
},
watch:{ // 监听 窗口数值的变化,发生变化就执行 inputType
showHeight: function(){
let height = this.docmHeight * 0.2;
let onheight = this.docmHeight - this.showHeight if(onheight < height){
this.ishigh = false;
}else{
this.ishigh = true;
}
}
},
methods: {
mounted() { // dom 元素构建完就执行的函数
// 立马获取初始值 为了后面发生的 bug 做铺垫
this.docmHeight = window.innerHeight;
// window.onresize监听页面高度的变化
window.onresize = () => {
return (() => {
this.showHeight = window.innerHeight;
})()
}
}

方法 2 利用getBoundingClientRect()

  • getBoundingClientRect()会返回一个矩形参数对象,里面记录了被选元素的所在相对位置
  • 利用这点,可以选中nav底部菜单,当被键盘顶起时,就可以操作它了。具体代码,参上
  • vue 获取 dom 的方法
<nav ref="nav" :class="{'mui-bar':!this.ishigh, 'mui-bar-tab':true,'hidden': this.ishigh}"></nav>
<script type="text/javascript">
var vm = new Vue({
.....
methods: {
getdom(){
let dom = this.$refs.nav
}
}
})
</script>

Vue 在手机上键盘把底部菜单顶上去的解决方案的更多相关文章

  1. Xamarin.Android 解决打开软键盘导致底部菜单上移问题

    在界面布局中有EditText控件,该控件一旦获取焦点则打开软键盘,如果布局中有底部菜单,那么底部菜单可能会被软键盘顶在其上面,看如下效果: 解决方法:在活动绑定界面之前写上下段代码即可 Window ...

  2. Android软键盘弹出将底部栏顶上去并不会挤压界面

    界面需要,找到了一种不需要去设置android:windowSoftInputMode属性的解决keyboard和layout不适问题 有关设置android:windowSoftInputMode的 ...

  3. Android 虚拟键盘弹出把底部栏顶上去的解决办法

    在AndroidManifest中使用ActivityGroup的activity中加上:android:windowSoftInputMode="adjustPan"

  4. 移动端 关于 键盘将input 框 顶上去的解决思路---个人见解

    在移动端,经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况. 比如说是这种 输入框未获得焦点键盘未抬起的时候: 输入框获得焦点键盘抬起的时候 这种情况下,不管是上面的textar ...

  5. 关于Android软键盘把布局顶上去的问题

    首先说下我的需求:布局最上面是一个bar,有左上角返回按钮和标题,bar下面是一个ScrollView,里面有各种TextView和EditText, 点击下面的EditText时,不希望软键盘把ba ...

  6. vue 手机键盘把底部按钮顶上去

    背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘 兼容性优化 实现原理:当页面高度发生变化的时候改变底部butt ...

  7. 解决input获取焦点时底部菜单被顶上来问题

    <div class="search-box"> <input class="search-input" type="text&qu ...

  8. Android中软键盘弹出时底部菜单上移问题

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  9. vue.js学习之 如何在手机上查看vue-cli构建的项目

    vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...

随机推荐

  1. How Many Answers Are Wrong (HDU - 3038)(带权并查集)

    题目链接 并查集是用来对集合合并查询的一种数据结构,或者判断是不是一个集合,本题是给你一系列区间和,判断给出的区间中有几个是不合法的. 思考: 1.如何建立区间之间的联系 2.如何发现悖论 首先是如何 ...

  2. ESP8266物联网开发 一

    其实学了这么多,最终目的还是在于物联网. 好吧,我们就在这个的基础上来吧,先摸索,边学边摸索. 去网上买了8266开发板... 遇到的问题: USB线的问题.从同事那随便搞了一根USB线,然后写好程序 ...

  3. 8VC Venture Cup 2017 - Elimination Round - A

    题目链接:http://codeforces.com/contest/755/problem/A 题意:给定一个正整数N,问你是否存在一个数M使得N*M+1不是素数(M的范围在[1,1000]). 思 ...

  4. hadoop集群常见问题解决

    1:namenode启动 datanode未启动 解决: /hadoop/tmp/dfs/name/current VERSION 查看截取id 与 data/current VERSION集群ID ...

  5. html5 实例渐变

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 人生苦短_我用Python_Try_Exception异常捕捉_007

    # coding=utf-8 ''' request+try__异常处理 ''' import requests class HttpRequests: def __init__(self, url, ...

  7. pipelines和重定向命令

    pipelines: command1 | command2 例如,ls -l /usr/bin | less,将输出结果作为 less 命令的输入结果,在standard output 中显示出来. ...

  8. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  9. python爬取“美团美食”汕头地区的所有店铺信息

    一.目的 获取美团美食每个店铺所有的评论信息,并保存到数据库和本地 二.实现步骤 获取所有店铺的poiId 首先观察详情页的url,后面是跟着一串数字的,而这一串数字代表着每个店铺特有的id号,我们称 ...

  10. Echarts和Highcharts学习笔记01——入门了解

      Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...