1. 添加属性screenHeight 和 timer。

screenHeight: window.innerHeight

timer: '' //  window.onresize函数频繁调用时，页面抖动较大，设定间隔

2. 在mounted 钩子函数中监听onresize事件

let that = this

window.onresize = () => {

if (!that.timer) {

that.timer = true

setTimeout(() => {

that.timer = false

that.screenHeight = window.innerHeight

}, 600)

}

}

3. h5 新单位 vh,vw

Vue：window.onresize的更多相关文章

  1. window.onresize监听事件

    window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生. 支持onresize的标签:<a>, <address>, <b>, ...

  2. window.onresize 事件笔记

     1.浏览器尺寸变化响应事件 : window.onresize = function(){....} 这里须要注意的是,onresize响应事件处理中.获取到的页面尺寸參数是变更后的參数. // ...

  3. window.onresize事件在vue项目中的应用

    //vue页面<template> <div id='echart'> 报表 </div> </template> <script> exp ...

  4. vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  5. vue中使用两个window.onresize问题解决

    在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效.找了下解决方案,可以采用下面的方式写就可以了. window.onresiz ...

  6. window.onresize 多次触发的解决方法

    用了window.onresize但是发现每次 onresize 后页面中状态总是不对,下面与大家分享下onresize 事件多次触发的解决方法. 之前做一个扩展,需要在改变窗口大小的时候保证页面显示 ...

  7. 关于window.onresize

    window.ss1 = function() { alert("aaa") } window.ss = function() { alert("bbb") } ...

  8. Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize

    当前做的一个项目中,频繁使用到百度团队的Echarts,发在一个页面同时出现多个图表时,只有最后一个图表触发了window.onresize事件,查询官方文档后得到解决. 方法如下: hwChart. ...

  9. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

随机推荐

  1. IFE第二天

    HTML是超文本标记语言,HTML5是下一代的HTML标准. HTML元素是组成HTML文档的部分,HTML属性为HTML元素提供附加信息. 文档类型<!DOCTYPE>声明帮助浏览器正确 ...

  2. javaWeb2之Jsp

    Java Server Page 放在除WEB-INF(放web项目的隐私文件)外的其他任何目录中. Java服务器端网页,实现在HTML页面编写Java代码实现动态内容,一种简化Servlet编写的 ...

  3. [Luogu 4245] 任意模数NTT

    Description 给定 \(2\) 个多项式 \(F(x), G(x)\),请求出 \(F(x) * G(x)\). 系数对 \(p\) 取模,且不保证 \(p\) 可以分解成 \(p = a ...

  4. <TCP/IP原理> (三) 底层网络技术

    传输介质 局域网(LAN) 交换(Switching) 广域网(WAN) 连接设备 第三章 底层网络技术 引言 1)Interne不是一种新的网络 建立在底层网络上的网际网 底层网络——“物理网”,网 ...

  5. How to expand Azure VM OS Disk

    There are three main disk roles in Azure: the data disk, the OS disk, and the temporary disk. 1. OS ...

  6. Luogu3768简单的数学题

    题目描述 题解 我们在一通化简上面的式子之后得到了这么个东西. 前面的可以除法分块做,后面的∑T2∑dµ(T/d)是积性函数,可以线性筛. 然后这个数据范围好像不太支持线性筛,所以考虑杜教筛. 后面那 ...

  7. Spring Cloud 微服务

    https://mp.weixin.qq.com/s?__biz=MzU0OTE4MzYzMw==&mid=2247486301&idx=2&sn=f6d45860269b61 ...

  8. 微信小程序之：wepy(二)

    一大堆实例:人家的博客园 代码规范: 1.尽量使用驼峰命名,避免使用$开头,框架内建属性都已$开头,可以使用this直接调用. 2.入口文件.页面.组件后缀都为.wpy. 3.使用ES6语法开发. 4 ...

  9. ajax+json

    ajax学习: 1.ajax的概念 局部刷新技术.不是一门新技术,是多种技术的组合,是浏览器端的技术 2 为什么要使用ajax?           传统的模式 是 发送请求 到 服务器 ,服务器经过 ...

  10. 20175209 《Java程序设计》第九周学习总结

    20175209 <Java程序设计>第九周学习总结 一.教材知识点总结 有关数据库下载中存在可能出现的问题已经在博客<数据库安装和使用过程中出现的一些问题>给出了相应的解决办 ...