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 相关文章推荐
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue实现购物车的小练习
Dec 21 Vue.js
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
由php if 想到的些问题
2008/03/22 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
JS Array对象入门分析
2008/10/30 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
Python入门篇之列表和元组
2014/10/17 Python
python简单获取数组元素个数的方法
2015/07/13 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python实现SOM算法
2018/02/23 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
质量安全标语
2014/06/07 职场文书
2015年教研组工作总结
2015/05/04 职场文书
初中语文教学反思范文
2016/03/03 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript