最近做微信公众号活动,需要首页往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. date命令之移动修改日志日期

    [16:19:50 root@C8[ 2020-06-16DIR]#touch app.log [16:21:25 root@C8[ 2020-06-16DIR]#ll total 0 -rw-r-- ...

  2. vue 组件传值,(太久不用就会忘记,留在博客里,方便自己查看)

    一 :父组件 传值给 子组件 方法: props //父组件 <template lang="html"> <div> <h3>我是父亲< ...

  3. 必须掌握的分布式文件存储系统—HDFS

    HDFS(Hadoop Distributed File System)分布式文件存储系统,主要为各类分布式计算框架如Spark.MapReduce等提供海量数据存储服务,同时HBase.Hive底层 ...

  4. Java数据结构-02单链表(一)

    一.链式存储: ①简述:线性表的链式存储结构的特点是用一组任意的存储单元存储线性表的数据元素,这组存储单元可以是连续的,也可以是不连续的.存储单元由两部分组成,数据源和指针,数据源放数据,指针指向下个 ...

  5. router-view组件在app.vue中渲染不出来怎么办

    1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...

  6. oracle ql/sql 相关语法解析

    这篇文章主要介绍了Oracle中游标Cursor基本用法详解,还是比较全面的,具有一定参考价值,需要的朋友可以了解下.   查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELE ...

  7. RocketMQ4.7.1双主双从集群搭建

    导读 上一集我们已经学会了SpringBoot整合RocketMQ点我直达,今天我们来搭建双主双从高性能MQ服务集群. 简介 主从架构 Broker角色,Master提供读写,Slave只支持读,Co ...

  8. cenos7 u disk install

    分类:             其他              2014-08-24 13:53     3406人阅读     评论(0)     收藏     举报 CentOS安装教程操作系统 ...

  9. AQS源码深入分析之共享模式-你知道为什么AQS中要有PROPAGATE这个状态吗?

    本文基于JDK-8u261源码分析 本篇文章为AQS系列文的第二篇,前文请看:[传送门] 第一篇:AQS源码深入分析之独占模式-ReentrantLock锁特性详解 1 Semaphore概览 共享模 ...

  10. Markdown tricks

    编辑排版 仅仅了解 Markdown 语法还不够,知道这些 排版技巧 增色您的文章内容. 空格和空行 留白,从艺术角度上说,留白就是以"空白"为载体进而渲染出美的意境的艺术.从应用 ...