最近做微信公众号活动,需要首页往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. 数据库备份作业的T-SQL语句

    1.关于大容量数据导入导出的一些方法SQL SERVER提供多种工具用于各种数据源的数据导入导出,这些数据源包括本文文件.ODBC数据源.OLE DB数据源.ASCII文本文件和EXCEL电子表格.2 ...

  2. python numpy输出排名

    python numpy排序后输出排名 问题: 假设某班的成绩为: 姓名 成绩 名次 小红 95 小黑 67 小白 58 小绿 82 小蓝 76 小橙 79 小可爱 99 请根据表格,输出对应的名次 ...

  3. Linux入门到放弃之六《磁盘和文件系统管理二》

    上一篇博客写到了如何创建卷组和创建逻辑卷,但是有一个问题,需要更大逻辑卷空间怎么办呢? 要求:使用lvextend命令为逻辑卷 mail扩充容量,从卷组 mail_store 上再 划出5GB给逻辑卷 ...

  4. 《Head First 设计模式》:剩下的模式

    正文 一.桥接模式 1.定义 桥接模式通过将实现和抽象分离开来,放在两个不同的类层次中,从而使得它们可以独立改变. 要点: 当一个类存在两个独立变化的维度,而且都需要进行扩展时,可以将其中一个维度抽象 ...

  5. Redis基础(一)数据结构与数据类型

    Redis数据结构 Redis一共有六种数据结构,分别是简单动态字符串.链表.字典.跳表.整数集合.压缩列表. 简单动态字符串(SDS) Redis只会使用C字符串作为字面量,在大多数情况下,Redi ...

  6. 开源项目bootdo的实战开发笔记

    开源项目bootdo 源码地址:https://github.com/lcg0124/bootdo 技术选型 1.后端 核心框架:Spring Boot 安全框架:Apache Shiro 模板引擎: ...

  7. 如何用vue实现一个矩形标记区域 rectangle marker

    代码地址:vue-rectangle-marker 一.前言 一些cms系统经常会用到区域标记功能,所以写了个用vue实现的矩形标记区域,包含拖拽.放大缩小.重置功能. 二.实现结果 初始 标记 三. ...

  8. elk部署(实操二)

    续上篇 https://www.cnblogs.com/wangql/p/13373022.html 安装logstash  下载地址:wget https://artifacts.elastic.c ...

  9. Flutter 1.22版本新增的Button

    Flutter 1.22版本新增了3个按钮,TextButton.OutlinedButton.ElevatedButton,虽然以前的Button没有被废弃,但还是建议使用新的Button. 为什么 ...

  10. CSP-S 2020模拟训练题1-信友队T1 四平方和

    题意简述 \(n\)是正整数,其四个最小的因子分别为\(d_1,d_2,d_3,d_4\). 求对于所有的\(n \le m\)满足 \[d_1^2+d_2^2+d_3^2+d_4^2=n \] 的\ ...