最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来。


<--!将手机屏幕的默认高度和实时高度获取-->
data(){
docmHeight: document.documentElement.clientHeight, //默认屏幕高度
showHeight: document.documentElement.clientHeight, //实时屏幕高度
hidshow: true, //显示或者隐藏footer,
} <!--把window.onresize事件挂在到mounted函数上-->
mounted(){
window.onresize = () => {
return (() => {
window.fullHeight = document.documentElement.clientHeight;
that.showHeight = window.fullHeight;
})()
};
}
<!--在watch中监听实时高度-->
watch: {
showHeight (val) {
let that = this;
that.show2 = true;
if (that.docmHeight > val){
that.hidshow = false;
} else{
that.hidshow = true;
}
}
},

  

  

  实时对比屏幕高度来显示隐藏tabbar

vue中实时监听移动端屏幕高度(采坑后实践)的更多相关文章

  1. vue中实时监听对象或变量的变化

    demo中监听了Input的变化,主要用到的是watch 1. 监听单个对象: <template> <div class="personal-center"&g ...

  2. 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...

  3. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

  5. vue实现实时监听文本框内容的变化(最后一种为原生js)

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!

    最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...

  7. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  8. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  9. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

随机推荐

  1. C# 清除文本中的HTML标签

    /// <summary>          /// 清除文本中Html的标签          /// </summary>          /// <param n ...

  2. Linux文件系统和管理-2文件操作命令(下)

    移动和重命名文件 mv 命令可以实现文件或目录的移动和改名 剪切的效果 同一分区移动数据,速度很快:数据位置没有变化 不同分区移动数据,速度相对慢:数据位置发生了变化 格式 和cp基本一样 mv [O ...

  3. 没事学些KVM(三)虚拟机基础管理

    创建完成虚拟机后,需要对虚拟机进行基础管理学习 virsh list #查看虚拟机列表 改命令只能查看正在运行或挂起的虚拟机 如果需要查看所有的虚拟机需要添加--all 参数 virsh start ...

  4. Stream(四)

    public class Test { /* * 创建:一步 * 中间:0~n步 * 终结:一步 * * 三.终结操作 * 1.void forEach(Consumer ):遍历流中的数据 * 2. ...

  5. Vue基础语法(四)

    vue的生命周期钩子函数 所有的生命周期钩子自动绑定this到上下文实例中,因此可以访问数据对property和方法进行运算,这意味着不蹦使用箭头函数来定义一个生命周期方法.参考官方文档,生命周期图 ...

  6. redis SETBIT命令原理

    redis SETBIT命令原理 /* SETBIT key offset bitvalue */ bitset的使用位来替代传统的整形数字,标识某个数字对应的值是否存在 底层有一个byte[]来实现 ...

  7. 【DeepLearning】AlexNet

    在前文中,我们介绍了LeNet的相关细节,它是由两个卷积层.两个池化层以及两个全链接层组成.卷积都是5*5的模板,stride =1,池化为MAX.整体来说它有三大特点:局部感受野,权值共享和池化.2 ...

  8. eclipse之SSH配置spring【二】

    第一篇中配置struts完成(http://www.cnblogs.com/dev2007/p/6475074.html),在此基础上,继续配置spring. web.xml中增加listener,依 ...

  9. 【SpringBoot】12.全局配置文件(properties)与yml配置文件

    一.SpringBoot全局配置文件 1.修改内嵌容器端口号 #application.properties server.port=8888 2.自定义属性的配置 使用@Value来给成员变量赋值 ...

  10. 什么是LRU缓存淘汰机制

    LRU是Least Recently Used的缩写,即最近最少使用,是一种常用的页面置换算法,选择最近最久未使用的页面予以淘汰.该算法赋予每个页面一个访问字段,用来记录一个页面自上次被访问以来所经历 ...