Vue2中动态计算高度代替100vh

LKaiLi 2022-02-16 17 Vue

介绍

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);
}

复制代码

# 参考文献

vue组件页面高度根据屏幕大小自适应 (opens new window)

← App.vue中的id问题 Vue2元素选中的样式 →

来发评论吧~