介绍
Vue2中动态计算高度 适合不能使用100vh的场景
# 通过Vue2来实现动态计算高度
- 动态计算高度和动态计算宽度一个道理 只是某些api不一致
为什么我们要动态计算高度?
100vh可以实现屏幕自适应的动态高度效果 但是他有很大局限性就是 当页面存在一些固定元素怎么办呢 比如顶部导航 这个时候我们再用100vh就不合适了
- 这里我想占满整个屏幕 就需要另外设置合适的高度啦
# 实现过程
- 我们可以通过获取整个屏幕的高度
document.body.clientHeight然后减去 顶部导航的高度 这样就可以实现一个 高度自适应效果 - 这个时候我们还可以通过
watch检测用户是否缩放了高度 然后动态实现自适应高度效果哦 - 注意: 不建议添加过度效果
transition因为刷新页面可能会造成高度过度特效 不要忘记px还要注意在mounted()生命周期中获取高度
第一步 在template中 动态绑定 height
- 动态绑定style的方法是
:style注意不要忘记px
<template>
<div :style="`height:${tableHeight}px`">
页面内容····
</div>
</template>
第二步 现在data()中声明 高度参数
data () {
return {
// 用户表格高度
tableHeight: 0,
// 动态计算高度
screenHeight: document.body.clientHeight,
// 监听状态位
timer: false,
}
},
第三步 在mounted()生命周期中获取高度
mounted () {
const that = this
window.onresize = () => {
return (() => {
// 获取到屏幕高度
that.screenHeight = document.body.clientHeight
})()
}
this.$nextTick(() => {
// 减去导航的高度(110)
this.tableHeight = window.innerHeight - 110
})
}
第四步 在watch中监控用户是否缩放
watch: {
screenHeight (val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if (!this.timer) {
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
this.screenHeight = val
this.timer = true
const that = this
setTimeout(function () {
// 动态改变高度
that.tableHeight = that.screenHeight - 110
that.timer = false
}, 400)
}
}
},
# 疑问?
- 这种方式会在嵌套路由中失效 暂时不知道为什么会这样 不推荐在嵌套路由中使用 目前怀疑是
watch的问题
# 通过css来实现动态计算高度
- 各位兄弟，我有一个动态高度的需求，但我又觉得交互很麻烦，现在有一个问题。交互我不想写，高度但我又想实现！有没有什么办法?
- 那我们可以只用css来实现 通过
calccss的计算属性来实现
# 详细示例
示例效果
- 假设我们知道顶部菜单的高度是
50px那么我们可以使用calc(100vh - 50px)
css设置calc计算
- 建议
min-height最小高度设置calc(100vh - 50px)然后height实际高度 设置为auto这样我们的页面既可以保持全屏高度 而且在缩放( 改变高度 )的时候 内容不受vh的影响
.box {
// 设置实际高度 让内容撑开 防止缩放(改变高度)时候受影响
height: auto;
// 设置最小高度 让其占高度占满整个页面(当前减去顶部固定标题啦)
min-height: calc(100vh - 50px);
}