vue 监听屏幕高度的实例


Posted in Javascript onSeptember 05, 2018

项目用vue版本是2.0的,项目中用到es6

首先需要在data里面定义页面的高度

data (){
  return {
    fullHeight: document.documentElement.clientHeight
  }
}

把window.onresize事件挂在到mounted

mounted() {
   const that = this
   window.onresize = () => {
    return (() => {
     window.fullHeight = document.documentElement.clientHeight
     that.fullHeight = window.fullHeight
    })()
   }
  }

监听window.onresize事件

watch: {
   fullHeight (val) {
    if(!this.timer) {
     this.fullHeight = val
     this.timer = true
     let that = this
     setTimeout(function (){
      that.timer = false
     },400)
    }
   }
  }

这里的定时器是为了优化,如果频繁调用window.onresize方法会造成页面卡顿,增加定时器会避免频繁调用window.onresize方法

以上这篇vue 监听屏幕高度的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的简单&简陋Tabs插件代码
Feb 09 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
jQuery大于号(>)选择器的作用解释
Jan 13 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
Vue-Router的使用方法
Sep 05 #Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 #Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 #Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 #Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 #Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 #Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 #Javascript
You might like
source.php查看源文件
2006/12/09 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
优秀教师工作感言
2014/02/16 职场文书
个人校本研修方案
2014/05/26 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP