uniAPP—动态获取一屏的高度

<template>
  <view class="container" :style="{ height: viewportHeight + 'px' }">
    <text>当前视口高度: {{ viewportHeight }}px</text>
    <!-- 其他内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      viewportHeight: 0, // 用于存储视口高度
    };
  },
  mounted() {
    this.updateViewportHeight();
    // 监听窗口大小变化
    uni.onWindowResize(this.updateViewportHeight);
  },
  methods: {
    updateViewportHeight() {
      const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
      this.viewportHeight = systemInfo.windowHeight; // 更新视口高度
    }
  },
  beforeDestroy() {
    // 移除监听
    uni.offWindowResize(this.updateViewportHeight);
  }
};
</script>

<style>
.container {
  background-color: #f0f0f0; /* 背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 其他样式 */
}
</style>