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和端口号打开项目 ...
随机推荐
- Vue对象的生命周期
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python自学第一天
Python #-*- coding:utf8 -*-(Python文件开头添加)用来解决中文编码问题 注:Python3以上文件不用加 一.变量:变量有数字.字母和下划线组成 1.不能以数字开头 2 ...
- python最新字符串学习总结
names="hello word" len() title() formate 格式化 split join find() replace() startswith() ends ...
- Nmap参考指南中文版
Nmap参考指南中文版 来源: http://www.nmap.com.cn/doc/manual.shtm 译注 该Nmap参考指南中文版由Fei Yang <fyang1024@gmail. ...
- ubuntu 系统类似QQ截图工具:DeepinScrot,flameshot
经过一番探索! Ubuntu16.04 就用DeepinScrot 好用!不支持flameshot,反正我是半天没装成功 教程:https://blog.csdn.net/qq_19339041/ar ...
- vue.js(6)--v-model
v-model实现数据的双向绑定(简易计算器实例) 简易计算器实例 <!DOCTYPE html> <html lang="en"> <head> ...
- 2019-1-25-WPF-ListBox-的选择
title author date CreateTime categories WPF ListBox 的选择 lindexi 2019-01-25 21:43:17 +0800 2018-2-13 ...
- 【LeetCode】设计题 design(共38题)
链接:https://leetcode.com/tag/design/ [146]LRU Cache [155]Min Stack [170]Two Sum III - Data structure ...
- java23种设计模式(五)--组合模式
转载:https://www.cnblogs.com/V1haoge/p/6489827.html定义:所谓组合模式,其实说的是对象包含对象的问题,通过组合的方式(在对象内部引用对象)来进行布局,我认 ...
- 前端每日实战:63# 视频演示如何用纯 CSS 创作一台烤面包机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEBJRN 可交互视频 此视频是可 ...