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.timer插件实现一个计时器
Apr 25 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JavaScript 创建对象
2009/07/17 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python使用post提交数据到远程url的方法
2015/04/29 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
简单说说tomcat的配置
2013/05/28 面试题
中国梦的演讲稿
2014/01/08 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
工作鉴定评语
2014/05/04 职场文书
会计学毕业生求职信
2014/06/25 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS