vue 监听屏幕高度的实例
项目用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 监听屏幕高度的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue移动端监听滚动条高度的实现方法
这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部 首先做的如何监听滚动条的高度,下面是我写的方法 var _this =this window.addEventListener('scroll',function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop>100{//滚动条的高度,可以动态获取也可以写死 //
-
用Vue.js实现监听属性的变化
前言 创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:
-
vue 监听屏幕高度的实例
项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把window.onresize事件挂在到mounted mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.docum
-
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten
-
elementUi vue el-radio 监听选中变化的实例代码
elementUi vue el-radio 监听选中变化的实例代码如下所述: //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class="radio" label="man">男</el-radio> <el-rad
-
Android 监听屏幕是否锁屏的实例代码
今天,简单讲讲如何监听手机屏幕是否锁屏. 实现方法: 1)通过BroadcastReceiver接收广播Intent.ACTION_SCREEN_ON和Intent.ACTION_SCREEN_OFF可以判断屏幕状态是否锁屏,但是只有屏幕状态发生改变时才会发出广播: 2)如果要在屏幕状态发生改变之前就想获取屏幕状态,可以通过反射机制调用PowerManager的isScreenOn方法 . 具体实现,见代码: 直接上代码: 1.定义一个接收广播的类 package com.app.lib; im
-
Vue 监听元素前后变化值实例
我就废话不多说了,大家还是直接看代码吧~ export default { data() { return { item: '' } }, watch: { item(now, before){ let remove = before.filter(x => now.indexOf(x) == -1); let add = now.filter(x => before.indexOf(x) == -1); /* 显示字符串或数组元素的增加和减少 */ console.log(add, remo
-
vue监听dom大小改变案例
需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下) 类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下.但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把 1.使用element-resize-detector var elementResize
-
基于vue监听滚动事件实现锚点链接平滑滚动的方法
基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne
-
vue监听用户输入和点击功能
本文实例为大家分享了vue监听用户输入和点击的具体代码,供大家参考,具体内容如下 功能1:监听用户输入和点击,并实时显示, 功能2:点击发布,编辑页面隐藏,显示发布成功. 功能1 html代码: 使用:v-model监听,!submmited视图默认显示,注意监听option v-for="(i,index) in authors" v-bind:value="authors[index], 监听当下用户点击的那个: <div id="add-blog&q
-
Vue监听数据渲染DOM完以后执行某个函数详解
实例如下: vm.$watch('某data数据',function(val){ vm.$nextTick(function() { 某事件(); }); }) 以上这篇Vue监听数据渲染DOM完以后执行某个函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
随机推荐
- 使用SQL查询DB2 9中的XML数据
- 基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
- 获取免费的Camtasia Studio 2使用授权
- android中实现背景图片颜色渐变方法
- 实例代码详解javascript实现窗口抖动及qq窗口抖动
- JavaScript学习笔记之ES6数组方法
- JS实现复选框的全选和批量删除功能
- Image显示服务器上任意绝对路径下的图片(采用二进制流实现)
- python检测服务器是否正常
- Jsp+Servlet实现购物车功能
- PHP实现自动识别原编码并对字符串进行编码转换的方法
- Python连接SQLServer2000的方法详解
- SHELL四则运算和比较
- ajax 调用后台方法大家可以讨论下
- 关于Script的Defer属性 原创
- 关于spring中aop的注解实现方法实例详解
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- javascript实现checkBox的全选,反选与赋值
- spring aop 拦截业务方法,实现权限控制示例
- Java Web 实现QQ登录功能一个帐号同一时间只能一个人登录