最近做微信公众号活动,需要首页往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. HTTP协议和APACHE

    HTTP服务 超文本传输协议. 互联网上应用最广的一种服务. 是一种应用层协议. Internet 互联网表示把各个网连起来 ARPAnet军网 TCP/IP协议 开放的协议 互联互通 Interne ...

  2. Asp.Net Core如何根据数据库自动生成实体类

    通过引用Nuget包添加实体类 运行 Install-Package Microsoft.EntityFrameworkCore.SqlServer 运行 Install-Package Micros ...

  3. Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

  4. 56.Qt-滚动字幕之无间隙滚动(原创)

    1.描述 最近要实现一个滚动条字幕,但是搜到的系列文章都是利用定时器QTimer,在固定的时间截取文本并显示,这样滚动的时候其实是断断续续的,因为实际上是一个个字符位移实现的,不过实现方便. 所以只有 ...

  5. vue3.0 的 Composition API 的一种使用方法

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面, ...

  6. vue watch的用法

    1.监听对象需要深度监听 ,如下代码可以监听整个msg对象的变化 watch: { msg: { handler(newValue, oldValue) { console.log(newValue) ...

  7. Cocos2d-x extensions库使用问题解决方法

    需要在加入头文件#include "cocos-ext.h" 1>e:\cocos\cocos2d-x\cocos2d-x-3.10\extensions\gui\cccon ...

  8. 关于数据源为授权车辆、企业车辆的判断(限foton)

    int mode = carInfoService.getCompanyCarMode(companyId); public int getCompanyCarMode(Long companyId) ...

  9. eclipse之SSH配置struts2【一】 (使用版本 2.3.24.1)

    eclipse创建Dynamic web project,勾选生成web.xml,创建index.jsp页面,tomcat部署能正常运行.进行下一步struts配置. web.xml中添加配置,配置在 ...

  10. JPA 相关API (一)

    [Query 接口下的常用API] [API 测试类:Test_QueryAPI.java] 1 package org.zgf.jpa.entity; 2 3 import java.math.Bi ...