vue 组件监听页面切换_vue项目如何监听窗口变化,达到页面自适应?
【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架,也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以通过【监听窗口变化】达到想要的绝大部分自适应效果。
获取窗口宽度:document.body.clientWidth
监听窗口变化:window.onresize
同时回顾一下JS里这些方法:
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
我们将document.body.clientWidth赋值给data中自定义的变量:
data:{
screenWidth: document.body.clientWidth
}
在页面mounted时,挂载window.onresize方法:
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
}
监听screenWidth属性值的变化,打印并观察screenWidth发生变化的值:
watch:{
screenWidth(val){
// 为了避免频繁触发resize函数导致页面卡顿,使用定时器
if(!this.timer){
// 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function(){
// 打印screenWidth变化的值
console.log(that.screenWidth)
that.timer = false
},400)
}
}
}
好!既然可以监听到窗口screenWidth值的变化,就可以根据这个值设定不同的自适应方案了!
【举个例子:div或img图片高度随宽度自适应】
div或img的宽度自适应很简单——设定css里width属性为百分比即可——但是高度呢?父级元素的高度并不是固定的(通常都是子级元素撑开的)
如上图,一个类似【图片库】的功能,当屏幕放大缩小时,我们可以设置外层边框(也就是灰色框框)的宽度为100%,以达到自适应——但高度无法设置,因此我们需要:
1.数据加载完后,获取图片(或外层框)的宽度
2.根据这个宽度,设置外层框的高度(如:宽度的60%)
3.监听窗口screenWidth值的变化,每次变化都重新获取宽度,并重新设置高度
所以,我们只需在前文代码的基础上,添加以下代码,以确保屏幕缩放时,每次监听宽度变化:
mounted() {
// 1、数据首次加载完后 → 获取图片(或外层框)宽度,并设置其高度
this.$nextTick(() => {
// 获取图片(或外层框)
let imgBox = this.$refs.imgBox
// 获取其宽度
let wImgbox = imgBox[0].getBoundingClientRect().width
// 设置其高度(以宽度的60%为例)
this.imgBox.height = 0.6 * wImgbox + 'px'
})
// 2、挂载 reisze 事件 → 屏幕缩放时监听宽度变化
const that = this
window.onresize = () => {
return (() => {
// window.screenWidth = document.body.clientWidth
// that.screenWidth = window.screenWidth
// console.log(that.screenWidth)
this.$nextTick(() => {
let imgBox = this.$refs.imgBox
let wImgbox = imgBox[0].getBoundingClientRect().width
this.imgBox.height = 0.6 * wImgbox + 'px'
})
})()
}
},
最终实现效果如下:
vue 组件监听页面切换_vue项目如何监听窗口变化,达到页面自适应?相关推荐
- Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换 一.Tab 切换组件 二.使用案例 三.API 使用指南 四.源代码 五.总结 一.Tab 切换组件 组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
- vue组件加载完成之后执行方法_vue-cli监听组件加载完成的方法
在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能. 1.安装vuex npm install vuex --sav ...
- vue 删除页面缓存_vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
- list vue 删除后页面渲染_Vue项目中v-for数组删除第n项元素产生渲染错误问题及解决方法...
项目背景 最近使用Vue(版本2.9)开发一个项目时,要生成表单列表,所以使用了v-for来做循环,循环里的元素(item)是一个子组件.同时每个元素都有删除按钮,点击后删除当前元素. 初始代码如下: ...
- vue 页面切换动画_Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理...
优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 本文章实现的Demo效果,如下图所示: class HeroHomePage extends State ...
- vue导入非es6 js文件_Vue项目兼容IE11
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但对于 IE9+,Vue 底层是支持. 由于开发过程中,我们经常会使用一些第三方插件或组件 ...
- vue keep-alive缓存页面切换后不触发created等用什么检测页面切换
首先是使用actived钩子函数,这个函数能够检测到keep-alive缓存的页面的切换 actived(){this,init(); } 其次如果是用router路由切换时时,如果没触发的activ ...
- vue的边距怎么设置_Vue项目如何适应浏览器,去除容器控件与浏览器四周的距离...
刚开始Vue项目中用了Container容器,运行之后,页面上容器的header距离浏览器的顶部有一段距离,然后找到了App.vue的样式,把(margin-top:60px)去掉了.之后运行发现依然 ...
- vue组件一直注册不了_Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的 ...
最新文章
- 重磅~ 深度学习中的图像分割:方法和应用
- 基于OpenCV的单目摄像机测距
- 【跃迁之路】【605天】程序员高效学习方法论探索系列(实验阶段362-2018.10.09)...
- 关于Advisor注入
- CCS新建BIOS工程的设置问题
- windows 环境 docker踩坑
- RabbitMQ(四):Exchange交换器--direct
- Ubuntu常用安装源
- android 物联网 pdf,android复习资料(物联网141).pdf
- Android 创世纪 第三天
- SpringBoot_Vue实现电影院售票系统
- 文本挖掘学习笔记(二):文档信息向量化与主题关键词提取
- 你必备的39个大数据可视化工具
- 1、什么是ASIC芯片?
- 脚本 金盾替换机器码_金盾2018SS加密视频机器码替换工具的分析过程三
- Java实现斗地主发牌
- Linux用户层和内核文件读写
- 内网安全-域横向网络传输应用层隧道技术
- 西部数据移动硬盘识别不了
- 设计模式之禅【组合模式】
热门文章
- 二 用标准c语言实现hanoi塔问题,天大2016年1二月《数据结构》期末大作业考核要求.doc...
- 生命周期共有那几个阶段_用产品生命周期 6 个阶段来思考
- a标签传值到另一个页面_Vue组件传值与通信集合
- 计算机网络管理员中级理论知识试卷06,计算机网络管理员中级理论+技能完整题库及答案...
- html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
- 【若依(ruoyi)】重置密码SQL脚本
- java框架ssm整合_SSM三大框架整合详细教程(Spring+SpringMVC+MyBatis)
- 特异性matlab,基于灰色理论计算位置特异性矩阵
- ts定义html是什么类型,TypeScript—类型定义文件(*.d.ts)
- mqtt连接失败_Flutter通过Mqtt消费ActivieMQ