最近做小程序，用的Taro，需要设置空状态居中显示，因为空状态出现的地方不一样，所以需要动态设置，那么就需要获取元素的高度来计算
文档翻了一遍也没有找到，原生js获取高度得到的是null，百度了下一下Taro 怎么获取元素的高度，教程里全都是用原生js，不知道他们怎么得到的
查不到的时候就要想到了强大的chatgpt4，然后去问了一下，果真问到了
Taro 项目怎么获取元素的高度
要获取元素的高度，可以使用 Taro 的 createSelectorQuery 方法。以下是一个简单地获取元素高度的示例：
- 首先确保已经安装了 Taro 框架。在项目根目录下执行
taro init myApp初始化一个新的 Taro 项目。 - 切换到创建的项目目录
cd myApp。 - 在 src/pages/index 目录下创建一个名为 index 的 Taro 页面示例。
在页面的 JSX 中，给需要获取高度的元素添加唯一的 id 属性，例如：
import React, { useEffect } from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
export default function Index() {
useEffect(() => {
getElementHeight()
}, [])
const getElementHeight = () => {
// 创建一个查询，指定要查找的 id
const query = Taro.createSelectorQuery()
query.select('#element').boundingClientRect()
// 执行查询，获取结果
query.exec((res) => {
if (res && res[0]) {
console.log('Element height:', res[0].height)
}
})
}
return (
<View className='index'>
<View id='element' style={{ height: '100px', backgroundColor: 'red' }}>Hello Taro</View>
</View>
)
}
在这个示例中，我们通过给 View 组件添加 id 属性，并在 useEffect 中调用 getElementHeight 方法来获取元素的高度。getElementHeight 方法使用 Taro.createSelectorQuery() 创建一个查询，根据指定的 id 查找元素，然后执行查询并输出结果中的高度。
该方法调用后，将在控制台中输出获取到的元素高度。
Taro 项目怎么获取视口的高度
在 Taro 项目中，你可以使用 Taro 的 API 来获取视口的高度。具体操作如下：
首先，在你的组件中引入 Taro：
import Taro from '@tarojs/taro';
然后，你可以通过 Taro.getSystemInfo() 方法来获取设备信息，其中包括视口的高度：
Taro.getSystemInfo({
success: (res) => {
const windowHeight = res.windowHeight;
console.log('视口高度:', windowHeight);
},
fail: (err) => {
console.log('获取失败: ', err);
}
});
Taro.getSystemInfo() 是一个异步方法，它会返回一个 Promise。如果你更喜欢使用 async/await 的方式，可以这样做：
async function getViewportHeight() {
try {
const res = await Taro.getSystemInfo();
const windowHeight = res.windowHeight;
console.log('视口高度:', windowHeight);
} catch (err) {
console.log('获取失败: ', err);
}
}
getViewportHeight();
以上代码会输出当前设备视口的高度。需要注意的是，在 Taro 项目中，默认单位是 px，请根据实际情况对高度进行处理。
下面是我的获取高度的方法
因为我几个页面加起来拢共也就4个组件来回组合，所以只需要获取每个组件的高度就行了，可以看到res返回的是一个数组，如果没有就返回null
// 获取empty的高度
const getHeight = async () => {
let windowHeight = 0;
try {
const res = await Taro.getSystemInfo();
windowHeight = res.windowHeight;
} catch (err) {
console.log('获取失败: ', err);
}
const query = Taro.createSelectorQuery();
query.select('.calander').boundingClientRect();
query.select('.time_table').boundingClientRect();
query.select('.course_all').boundingClientRect();
query.select(`.${props.type}`).boundingClientRect();
query.exec((res) => {
if (res) {
console.log('res', res);
let calanderHeight = res[0]?.height || 0;
let timetableHeight = res[1]?.height || 0;
let courseHeight = res[2]?.height || 0;
let emptyHeight = res[0]?.height || 0;
const margin =
(windowHeight - calanderHeight - timetableHeight - courseHeight - emptyHeight) / 2 - 20;
state.margin = margin > 20 ? margin : 20;
setTimeout(() => {
state.opacity = 1;
}, 1);
}
});
};
