vue中实时监听移动端屏幕高度(采坑后实践)
最近做微信公众号活动,需要首页往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中实时监听移动端屏幕高度(采坑后实践)的更多相关文章
- vue中实时监听对象或变量的变化
demo中监听了Input的变化,主要用到的是watch 1. 监听单个对象: <template> <div class="personal-center"&g ...
- 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放
直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...
- 009——VUE中watch监听属性变化实现类百度搜索栏功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- vue实现实时监听文本框内容的变化(最后一种为原生js)
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!
最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- Vue watch 深层监听
Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
随机推荐
- Unity控制角色移动
Copy代码前的准备工作 整体结构 建立个空对象命名随意,主要是为了:角色掉出地图时,可以回到空对象的位置 在建立个空对象命名为Player,放到PlayResurrectionPoints子级下,并 ...
- CentOS 环境变量编辑、保存、立即生效的方法
方法一: 该方法只能修改临时配置文件,当每次系统重启后,配置文件将失效 假如我的安装路径如下:/home/oracle/app/oracle/product/11.2.0/dbhome_1/bin 那 ...
- java中true是关键字吗
java中的关键字有哪些? 答:1)48个关键字:abstract.assert.boolean.break.byte.case.catch.char.class.continue.default.d ...
- VirtualBox 安装Ubuntu(16.04/18.04)时显示不全的解决方法
是是系统分辨率不同导致的问题 Alt+鼠标左键 (16.04版本亲测有效,18.04版本亲测无效)或者Win+鼠标左键 (18.04版本亲测有效)拖动安装界面,即可显示内容.
- Swagger配置与使用
问题:前后端分离时代的到来 前端需要测试后端数据 后端提供接口,实时更新接口的改动 一.Swagger简介 号称世界上最流行的api框架 Restful api文档在线自动生成工具-->api文 ...
- MongoDB下载安装与配置
一.下载与安装 1.进入mongodb官网,try->download->community找到下载.或者直接在地址栏输入:https://www.mongodb.com/try/down ...
- 自定义控件-只有横线的文本输入框(TxtLine)
需求:在实际开发中,由于TextBox控件的背景色样式不美观,且TextBox不能直接设置背景颜色,因此需要使用自定义控件以实现如下效果 实现代码 public partial class TxtLi ...
- LDA与PCA
参考: https://www.cnblogs.com/pinard/p/6244265.html https://blog.csdn.net/qq_25680531/article/details/ ...
- 论文解读 - Composition Based Multi Relational Graph Convolutional Networks
1 简介 随着图卷积神经网络在近年来的不断发展,其对于图结构数据的建模能力愈发强大.然而现阶段的工作大多针对简单无向图或者异质图的表示学习,对图中边存在方向和类型的特殊图----多关系图(Multi- ...
- RocketMQ4.x安装部署
1.下载安装包:https://www.apache.org/dyn/closer.cgi?path=rocketmq/4.2.0/rocketmq-all-4.2.0-bin-release.zip ...