Uniapp自动调整元素高度

获取设备的像素

如果你想让元素的高度相对于整个屏幕的高度占用一定的比例,可以通过获取屏幕的高度,然后计算出你想要的比例来设置元素的高度。以下是如何实现的示例:

vue 复制代码
<script setup>
import { ref, onMounted } from 'vue';

// 定义一个响应式变量来存储计算后的高度
const contextBoxHeight = ref('auto');

onMounted(() => {
    // 获取系统信息
    uni.getSystemInfo({
        success: function (res) {
            // 获取屏幕高度
            const screenHeight = res.windowHeight;
            console.log('屏幕高度:', screenHeight);

            // 计算调整后的高度,假设要占用屏幕高度的70%
            const adjustedHeight = screenHeight * 0.7;

            // 使用响应式变量来设置高度
            contextBoxHeight.value = `${adjustedHeight}px`;
        }
    });
});
</script>

<template>
    <view class="contextBox" :style="{ height: contextBoxHeight }">
        <!-- 其他内容 -->
    </view>
</template>

<style scoped>
.contextBox {
    position: relative;
    width: 100%;
    border: 1px solid red;
    overflow-x: hidden;
    overflow-y: hidden;
}
</style>

说明:

  • uni.getSystemInfo: 用于获取设备的系统信息,包括屏幕高度。
  • screenHeight * 0.7 : 计算出contextBox应该占用的高度比例(这里假设为70%)。
  • contextBoxHeight.value = ${adjustedHeight}px`` : 使用响应式变量来动态设置contextBox的高度。

这种方法确保contextBox的高度是相对于整个屏幕的高度,并且在不同设备上都能保持一致的比例。

获取元素高度

在uni-app中,要获取一个元素的高度,可以使用uni.createSelectorQuery。这个API允许你在App、小程序和H5中获取元素的布局信息。以下是一个示例,展示如何获取元素的高度:

vue 复制代码
<template>
    <view class="contextBox">
        <!-- 其他内容 -->
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义一个响应式变量来存储元素的高度
const elementHeight = ref(0);

onMounted(() => {
    // 创建选择器查询实例
    const query = uni.createSelectorQuery().in(this);

    // 选择要获取高度的元素
    query.select('.contextBox').boundingClientRect(data => {
        if (data) {
            elementHeight.value = data.height;
            console.log('元素高度:', elementHeight.value);
        }
    }).exec();
});
</script>

<style scoped>
.contextBox {
    position: relative;
    width: 100%;
    border: 1px solid red;
    overflow-x: hidden;
    overflow-y: hidden;
}
</style>

说明:

  • uni.createSelectorQuery().in(this): 创建一个选择器查询实例,并指定在当前组件实例中进行查询。
  • .select('.contextBox') : 选择要查询的元素,.contextBox是元素的类名。
  • .boundingClientRect(): 获取元素的布局位置信息,包括高度。
  • .exec(): 执行查询。

这种方法在uni-app中是兼容的,适用于H5、小程序和App等多端环境。确保在onMounted中使用,以便在DOM加载完成后进行查询。

相关推荐
foxhuli22937 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html