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 相关文章推荐
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 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
main.php
2006/12/09 PHP
php 过滤危险html代码
2009/06/29 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Django ModelForm操作及验证方式
2020/03/30 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
农村婚礼证婚词
2014/01/10 职场文书
食品安全工作实施方案
2014/03/26 职场文书
安全生产演讲稿
2014/05/09 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers