移动端点击输入框,弹出键盘,底部被顶起问题(vue)
这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题;一旦超出屏幕范围,当你点击输入框,弹出键盘时,底部固定定位的footer部分就会被顶起来,很丑!有木有。
在键盘弹起时,页面高度变小,底部固定定位上升,所以我们只需要在页面高度变小时,隐藏底部footer部分,当键盘消失时再显示底部footer部分就可以解决问题了。
解决方法:检测浏览器的resize事件,当高度过小时就可以判定为出现这种情况,这时把定位改成absolute或者直接隐藏掉之类的。
第一步: 先在 data 中去 定义 一个记录高度是 属性
data () {
return {
docmHeight: document.documentElement.clientHeight, //默认屏幕高度
showHeight: document.documentElement.clientHeight, //实时屏幕高度
hidshow:true //显示或者隐藏footer
};
},
第二步: 我们需要将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
mounted() {
// window.onresize监听页面高度的变化
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}
},
第三步:watch监控比较,判断按钮是否该显示出来
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.hidshow=false
}else{
this.hidshow=true
}
}
第四步:在模板中给footer添加v-show
<div class="footer" v-show="hidshow">
<div class="footerBtn">核验</div>
</div>
移动端点击输入框,弹出键盘,底部被顶起问题(vue)的更多相关文章
- easyui combobox点击输入框弹出下拉框
由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...
- android 类似QQ底部输入框弹出键盘和面板冲突 布局闪动处理方案(转)
先看下效果 差不多就是解决这种冲突,布局闪动的 作者的githup :https://github.com/Jacksgong/JKeyboardPanelSwitch Android键盘面板冲突 布 ...
- extjs中,datefield日期,点击输入框弹出日期,禁止手动输入
之前用readonly:true连日期也选不了了,editable:false也不行,最后用事件监听实现 栗子如下: { xtype: 'datefield', fieldLabel: '创建结束时间 ...
- js 点击input焦点不弹出键盘 PDA扫描枪
直接贴代码 1.利用input readonly属性 当input有readonly属性的时候,即使获取焦点,也不会吊起小键盘 扫码枪输入的间隔大概在15-60毫秒,然后手动输入的100-200毫秒之 ...
- fullpage插件在移动端弹出键盘页面特殊处理
fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件. 最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错 ...
- (Vue)移动端点击输入框,弹出键盘,底部被顶起问题
(Vue)移动端点击输入框,弹出键盘,底部被顶起问题:https://www.jianshu.com/p/210fbc846544 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用 ...
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- Html : 点击按钮弹出输入框,再次点击进行隐藏
上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- (转载) EditText初始不弹出软键盘,只有光标显示,点击再弹出
EditText初始不弹出软键盘,只有光标显示,点击再弹出 2013-06-08 10:13 21305人阅读 评论(5) 收藏 举报 分类: android基础(91) 版权声明:本文为博主原创 ...
随机推荐
- CAN总线协议 学习笔记
1.CAN总线网络 CAN总线网络主要挂在CAN_H和CAN_L,各个节点通过这两条线实现信号的串行差分传输,为了避免信号的反射和干扰,还需要在CAN_H和CAN_L之间接上120欧姆的终端电阻,但是 ...
- JDK,常见数据结构解读
一.情有独钟 对数据结构情有独钟,打算慢慢把jdk里的实现都读一遍,发现其中的亮点,持续更新. 二.ArrayList 这应该是我们学习java最早接触的到的数据结构,众所周知,数组在申请了内存之后, ...
- windows系统上安装与使用Android NDK r5
windows系统上安装与使用Android NDK r5 很早就听说了android的NDK应用,只是一直没有时间去研究,今天花了点时间在windows平台搭建了NDK环境,并成功运行了第一个简单 ...
- vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
- mysql层的内存分配
参考 http://www.cnblogs.com/justfortaste/p/3198406.html http://m.blog.csdn.net/blog/IT_PCode/17007833 ...
- 如何让IE 低版本下支持 css3属性
依赖源 该文件为 ie-css3.htc (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码 通过源码我们可以看到 该文件在一定程度上 ...
- 杭电OJ第11页2010-2019道题(C语言)
2010. 水仙花数 问题描述 Problem Description 春天是鲜花的季节,水仙花就是其中最迷人的代表,数学上有个水仙花数,他是这样定义的: "水仙花数"是指一个三位 ...
- while 语句
/* while循环 格式:while(循环保持条件){需要执行的语句} OC: int i = 0; int sum = 0; while (i <= 10) { sum = i++; } w ...
- JS优先队列排序。出队时,先找出优先级最高的元素,再按照先进先出出队。
JS优先队列排序.出队时,先找出优先级最高的元素,再按照先进先出出队. /* * 优先队列 * 出队时,先找出优先级最高的元素,再按照先进先出出队. * */ function Queue(){ th ...
- 《Head First 设计模式》读书笔记
目录 <Head First 设计模式>读书笔记 创建模式 结构模式 行为模式 用思维导图记录的读书笔记. <Head First 设计模式>读书笔记 模式的分类遵循<设 ...