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 ...
随机推荐
- Helium文档15-WebUI自动化-chromedriver问题
前言 helium库是自带chromedriver的,我们怎么来查看在哪里呢? 目录介绍 用我的电脑上的路径打比方如下: D:\Program Files (x86)\Python38\Lib\sit ...
- ffmpeg+Python实现B站MP4格式音频与视频的合并
目录 安装 官网下载 环境变量 验证 ffmpeg的使用 Python实现自动处理 文件结构 番剧缓存结构 常规缓存结构 文件信息 代码 具体代码 代码说明 安装 官网下载 http://ffmpeg ...
- 类型“DbContext”在未引用的程序集中定义。必须添加对程序及“EntityFramework,Version=6.0.0.0,Culture=neutral,PublicKeyToken=b77a5c561934e089”的引用。using语句中使用的类型必须可隐式转换为”System.IDisposable
其他层引用Model层的ef模型时会发生这个错误 解决方法: 在你要使用EF模型的层下点击添加引用 然后点击浏览 找到Model层文件下的bin>debug文件 引用这两个dll文件 如 ...
- 为iOS编译FFmpeg静态库
为iOS编译FFmpeg静态库 环境:OS X Yosemite (版本10.10.5) Xcode (Version 7.1.1 (7B1005)) 一.资料准备: (1)ffmpeg源 ...
- VS 2019 远程调试
一.简介 今天遇到一个问题,本地调试无任何问题,但是发布后代码服务器端响应总是不对.所以想调试下.故搞个远程调试.现在先配置下工具.步骤如下. 二.步骤 2.1.远程访问工具下载 地址:https:/ ...
- better-scroll插件 api
Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...
- CodeForces 916D Jamie and To-do List
题意 你需要维护一个任务列表,有 \(q\) 次操作,每次操作形如以下四种: set a x:设置任务 \(a\) 的优先级为 \(x\),如果任务列表中没有 \(a\) 则加进来. remove a ...
- xshell连接windows10子系统ubuntu
修改端口 cd /etc/ssh#备份sudo cp sshd_config sshd_config.baksudo vim sshd_config修改sshd_config Port 2233 #修 ...
- rclone 云盘同步工具的正确打开方式
Rclone 是一款的命令行工具,支持在不同对象存储.网盘间同步.上传.下载数据. 官网网址:https://rclone.org/ Github 项目:https://github.com/ncw/ ...
- How to using code find the menu label of Menus【X++】
// VAR Changed by Xie Yu Fan.Fandy 谢宇帆 static void XIE_FindMenu(Args _args) { Dialog dlg = new Dialo ...