Vue 在手机上键盘把底部菜单顶上去的解决方案
Vue 在手机上键盘把底部菜单顶上去的解决方案
ios和安卓的键盘的区别
- ios和安卓的键盘的区别弹起方式不同, ios直接弹出键盘, 不影响页面, 而安卓键盘弹起时会把页面顶起来, 这样就会把底部菜单顶起来了, 绝对定位也没用;
用了网上的一些方案,发现了一些不满意的地方
- 具体参考了此文章:https://segmentfault.com/a/1190000014228563
- 所以自己摸了一下
window
的屁股
解决思路
- 页面进来时获取一个可以监听屏幕高度的api,具体可以打开控制台输入
window
查看, 定义一个变量用来存储这个参数
, 当实时屏幕高度小于此参数时时, 说明键盘弹起来了, 这时就隐藏底部菜单, 当键盘收起时, 再显示底部菜单;
遇到 2 个坑
- 开始我用了
Vue
获取dom
的位置offsetTop
,但在手机上,菜单顶上来了,dom
的位置没有变化,原来offsetTop
是绝对坐标- 查看了
window
的几个参数之后找到了一个innerHeight
- 查看了
- 一个浏览器(Chrome)在上滑时,浏览器的导航栏会消失,这样会造成
innerHeight
的变化(已解决)
具体代码实现
这里用一个
hidden
属性来控制mui-bar
是mui
的一个组件,上面有行代码是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 在手机上键盘把底部菜单顶上去的解决方案的更多相关文章
- Xamarin.Android 解决打开软键盘导致底部菜单上移问题
在界面布局中有EditText控件,该控件一旦获取焦点则打开软键盘,如果布局中有底部菜单,那么底部菜单可能会被软键盘顶在其上面,看如下效果: 解决方法:在活动绑定界面之前写上下段代码即可 Window ...
- Android软键盘弹出将底部栏顶上去并不会挤压界面
界面需要,找到了一种不需要去设置android:windowSoftInputMode属性的解决keyboard和layout不适问题 有关设置android:windowSoftInputMode的 ...
- Android 虚拟键盘弹出把底部栏顶上去的解决办法
在AndroidManifest中使用ActivityGroup的activity中加上:android:windowSoftInputMode="adjustPan"
- 移动端 关于 键盘将input 框 顶上去的解决思路---个人见解
在移动端,经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况. 比如说是这种 输入框未获得焦点键盘未抬起的时候: 输入框获得焦点键盘抬起的时候 这种情况下,不管是上面的textar ...
- 关于Android软键盘把布局顶上去的问题
首先说下我的需求:布局最上面是一个bar,有左上角返回按钮和标题,bar下面是一个ScrollView,里面有各种TextView和EditText, 点击下面的EditText时,不希望软键盘把ba ...
- vue 手机键盘把底部按钮顶上去
背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘 兼容性优化 实现原理:当页面高度发生变化的时候改变底部butt ...
- 解决input获取焦点时底部菜单被顶上来问题
<div class="search-box"> <input class="search-input" type="text&qu ...
- Android中软键盘弹出时底部菜单上移问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
- vue.js学习之 如何在手机上查看vue-cli构建的项目
vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...
随机推荐
- How Many Answers Are Wrong (HDU - 3038)(带权并查集)
题目链接 并查集是用来对集合合并查询的一种数据结构,或者判断是不是一个集合,本题是给你一系列区间和,判断给出的区间中有几个是不合法的. 思考: 1.如何建立区间之间的联系 2.如何发现悖论 首先是如何 ...
- ESP8266物联网开发 一
其实学了这么多,最终目的还是在于物联网. 好吧,我们就在这个的基础上来吧,先摸索,边学边摸索. 去网上买了8266开发板... 遇到的问题: USB线的问题.从同事那随便搞了一根USB线,然后写好程序 ...
- 8VC Venture Cup 2017 - Elimination Round - A
题目链接:http://codeforces.com/contest/755/problem/A 题意:给定一个正整数N,问你是否存在一个数M使得N*M+1不是素数(M的范围在[1,1000]). 思 ...
- hadoop集群常见问题解决
1:namenode启动 datanode未启动 解决: /hadoop/tmp/dfs/name/current VERSION 查看截取id 与 data/current VERSION集群ID ...
- html5 实例渐变
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 人生苦短_我用Python_Try_Exception异常捕捉_007
# coding=utf-8 ''' request+try__异常处理 ''' import requests class HttpRequests: def __init__(self, url, ...
- pipelines和重定向命令
pipelines: command1 | command2 例如,ls -l /usr/bin | less,将输出结果作为 less 命令的输入结果,在standard output 中显示出来. ...
- 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE
<template> <div> <!--canvas截取流--> <canvas ref="canvas" ...
- python爬取“美团美食”汕头地区的所有店铺信息
一.目的 获取美团美食每个店铺所有的评论信息,并保存到数据库和本地 二.实现步骤 获取所有店铺的poiId 首先观察详情页的url,后面是跟着一串数字的,而这一串数字代表着每个店铺特有的id号,我们称 ...
- Echarts和Highcharts学习笔记01——入门了解
Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...