uniapp 元素隐藏时无法获取高度

在 UniApp 开发中，当元素被设置为 `display: none` 或者 `visibility: hidden` 隐藏时，由于它不在视图流（Visual Tree）中，浏览器不会计算其大小和位置信息，因此直接尝试获取这种隐藏元素的高度可能会返回 `undefined` 或者 `0`。

这是因为浏览器为了性能优化，并不会对不可见的元素进行渲染，包括计算样式、尺寸等。如果你想在隐藏状态下获取元素的真实高度，可以采用以下几种方式：

1. 使用 JavaScript 监听元素状态改变，如切换显示/隐藏时再获取高度。例如：

let element = this.$refs.yourElement;
element.style.display = 'none'; // 隐藏元素
uni.nextTick(() => {
  let height = element.offsetHeight; // 等待DOM更新后获取高度
});

2. 将高度计算放到 `mounted()` 或需要获取高度的时候，确保元素已经渲染完成。
3. 如果需要长期存储元素高度，可以考虑将高度缓存到数据属性或者vuex状态中，而非实时动态获取。

相关问题

uniapp获取手机键盘高度

UniApp 中获取手机键盘的高度通常通过监听 `input` 元素的 `focus` 和 `blur` 事件来实现，因为当输入元素获得焦点时，键盘会弹出。你可以使用 JavaScript 来计算这个差异。以下是基本步骤：

1. 首先，你需要在需要关注键盘变化的页面上找到目标 input 元素，并添加事件监听器。

const inputElement = document.getElementById('yourInputId'); // 替换为实际的 input ID

// 监听聚焦和失去焦点事件
inputElement.addEventListener('focus', handleFocus);
inputElement.addEventListener('blur', handleBlur);

function handleFocus() {
  // 当输入框获得焦点时，记录屏幕底部距离
  const bottomOffset = getScreenBottom();
}

function handleBlur() {
  // 键盘隐藏后，更新屏幕底部高度并计算键盘高度
  const newBottomOffset = getScreenBottom();
  const keyboardHeight = Math.abs(newBottomOffset - bottomOffset);
}

2. `getScreenBottom` 函数可以使用 JavaScript 获取屏幕底部的坐标，这可能会因浏览器和设备而异。这里提供一个简单的示例：

function getScreenBottom() {
  if (typeof window.innerHeight !== 'number') {
    return document.documentElement.clientHeight;
  }
  return window.innerHeight;
}

3. 当你得到屏幕底部的变化后，通过两个值的差计算键盘的高度。注意，这种方法并不是绝对准确的，因为某些应用可能有自定义的软键盘设计，高度可能不固定。

uniapp项目中, 显示隐藏内容切换，且显示内容高度不固定

针对你的问题，我可以提供以下解决方案：

1. 在显示区域的父元素上使用v-if或v-show指令来实现显示/隐藏的效果。
2. 在显示区域的父元素上使用v-bind:style指令来动态设置高度，从而实现高度不固定的效果。

以下是一个示例代码，用于实现上述方案：

HTML代码：

<template>
  <div class="container">
    <button @click="toggle">显示/隐藏</button>
    <div class="content" v-if="show" v-bind:style="{height: height + 'px'}">
      ...
    </div>
  </div>
</template>

JavaScript代码：

export default {
  data() {
    return {
      show: false,
      height: 0
    }
  },
  methods: {
    toggle() {
      this.show = !this.show;
      if (this.show) {
        this.height = this.$refs.content.offsetHeight;
      } else {
        this.height = 0;
      }
    }
  }
}

在上面的代码中，我们使用v-if指令来切换显示/隐藏状态，并使用v-bind:style指令来动态设置高度。在toggle方法中，我们通过获取DOM元素的offsetHeight属性来动态计算实际高度，并将其保存在height变量中，然后再将height变量绑定到v-bind:style指令中，从而实现高度不固定的效果。

当然，这只是一个简单的示例，你还需要根据具体的情况来做出一些调整。希望这能帮到你！