Taro 项目怎么获取元素的高度和视口高度

最近做小程序，用的Taro，需要设置空状态居中显示，因为空状态出现的地方不一样，所以需要动态设置，那么就需要获取元素的高度来计算

文档翻了一遍也没有找到，原生js获取高度得到的是null，百度了下一下Taro 怎么获取元素的高度，教程里全都是用原生js，不知道他们怎么得到的

查不到的时候就要想到了强大的chatgpt4，然后去问了一下，果真问到了

Taro 项目怎么获取元素的高度

要获取元素的高度，可以使用 Taro 的 createSelectorQuery 方法。以下是一个简单地获取元素高度的示例：

1. 首先确保已经安装了 Taro 框架。在项目根目录下执行 taro init myApp 初始化一个新的 Taro 项目。
2. 切换到创建的项目目录 cd myApp。
3. 在 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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这个示例中，我们通过给 View 组件添加 id 属性，并在 useEffect 中调用 getElementHeight 方法来获取元素的高度。getElementHeight 方法使用 Taro.createSelectorQuery() 创建一个查询，根据指定的 id 查找元素，然后执行查询并输出结果中的高度。

该方法调用后，将在控制台中输出获取到的元素高度。

Taro 项目怎么获取视口的高度

在 Taro 项目中，你可以使用 Taro 的 API 来获取视口的高度。具体操作如下：

首先，在你的组件中引入 Taro：

import Taro from '@tarojs/taro';
1

然后，你可以通过 Taro.getSystemInfo() 方法来获取设备信息，其中包括视口的高度：

Taro.getSystemInfo({
  success: (res) => {
    const windowHeight = res.windowHeight;
    console.log('视口高度:', windowHeight);
  },
  fail: (err) => {
    console.log('获取失败: ', err);
  }
});
1
2
3
4
5
6
7
8
9

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();
1
2
3
4
5
6
7
8
9
10
11

以上代码会输出当前设备视口的高度。需要注意的是，在 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);
    }
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34