vue动态监听窗口高度 - 全背景banner

参考项目文件 src/hr/index.vue 【结合下文：第一种方法】

第一种方法：【本文手写代码】

data() {return {screenHeight: document.body.clientHeight, // 当前浏览器窗口高度};
},
mounted(){// banner高度重置this.resetHeight();      $(window).resize(function(){this.resetHeight();      /*var windowsHeight = $(window).height();$('.bannerWrap').height(windowsHeight);this.screenHeight = windowsHeight;// console.log(this.screenHeight);*/});
},methods: {// banner高度重置resetHeight:function(){var windowsHeight = $(window).height();$('.bannerWrap').height(windowsHeight);this.screenHeight = windowsHeight;// console.log(this.screenHeight);},}

参考地址：https://hacpai.com/article/1534819192805

第二种方法：

在 data 中去定义一个记录宽度是属性

data: {return {screenWidth: document.body.clientWidth      // 设置默认值}
}

在 vue mounted 的时候去挂载一下 window.onresize 方法

mounted () {const that = thiswindow.onresize = () => {return (() => {window.screenWidth = document.body.clientWidth   that.screenWidth = window.screenWidth})()}}

watch去监听这个属性值的变化，如果发生变化则讲这个val传递给this.screenWidth

watch: {screenWidth (val) {this.screenWidth = val}}

优化因为频繁触 resize函数，导致页面卡顿的问题

watch: {screenWidth (val) {if (!this.timer) {this.screenWidth = valthis.timer = truelet that = thissetTimeout(function () {// that.screenWidth = that.$store.state.canvasWidthconsole.log(that.screenWidth)that.init()that.timer = false}, 400)}}}

`第三种方法：（推荐使用）:`

原理：在 mounted 钩子中全局监听 resize 事件，然后绑定的函数再做具体的处理。

data(){return {clientHeight: document.body.clientHeight,},
},
mounted() {// 在DOM渲染数据时，设置下区域高度为浏览器可视区域高度．this.clientHeight = document.body.clientHeight;// 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．const _this = this;window.onresize = function temp() {_this.clientHeight = document.body.clientHeight;};
},

作者：chenxc
链接：https://hacpai.com/article/1534819192805
来源：黑客派
协议：CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/

以上就是关于" vue动态监听窗口高度 - 全背景banner "的全部内容。

vue动态监听窗口高度 - 全背景banner相关推荐

监听关闭页面事件 ajax,Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { ...
动态监听DOM元素的高度
1.背景考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容 ...
vue 组件监听页面切换_vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
window.onresize监听窗口宽度踩坑 vue
踩坑方法 vue组件监听页面宽度变化最近网上比较常用的方法此方法可以实现监听窗口变化但是! 不支持组件重复循环使用不支持组件重复循环使用不支持组件重复循环使用重要的事情说三遍 ! 此方法在多 ...
vue 中监听document.body.scrollTop 值总为0的解决方法
// 基础资料网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; scrollTop 设置或获取位于对象最顶 ...
js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
原理:通过监听窗口的变化来动态获取窗口大小用到的方法:addEventListener() 监听window的resize事件 js代码: // 定义事件侦听器函数 function watchWi ...
JavaScript 中监听 div 高度的变化
实现功能描述: 基于 vue + elementUI,在 Dialog 中有一个 Select 选择器,当 Select 的下拉列表显示时,要求高度能够撑开 Dialog.实现效果如图: 实现实际项 ...
zookeeper专题：使用zookeeper客户端实现动态监听节点并获取数据
文章目录 1. zookeeper原生客户端 2. Curator客户端 1. zookeeper原生客户端 zookeeper原生客户端就是zookeeper官方自带的客户端,作为代码与zk服务器交 ...
聊聊RabbitMq动态监听这点事
很长时间没有分享过学习心得了,看了下发布记录,最后一篇文章的时间都在2020-12-10年了,今天抽时间整理下一个很早就想整理的技术分享.顺便说句题外话,因为我一直没时间整理,再加上开发的小伙伴对Mq ...

vue动态监听窗口高度 - 全背景banner

vue动态监听窗口高度 - 全背景banner

第一种方法：【本文手写代码】

第二种方法：

`第三种方法：（推荐使用）:`

vue动态监听窗口高度 - 全背景banner相关推荐

最新文章

热门文章