uniapp怎么获取元素的高度

1. 前言

在开发uniapp项目的过程中，我们时常需要获取某个元素的高度，以便进行一些动态计算。本篇文章将介绍uniapp中获取元素高度的方法。

2. 通过选择器获取元素

2.1 通过uni.createSelectorQuery()方法

uniapp提供了一个createSelectorQuery()方法，可以用于查询页面中的元素信息。

该方法返回一个SelectorQuery对象，可以调用该对象的select()方法选择要查询的节点，并通过boundingClientRect()方法获取该节点的信息，包括宽度、高度等。

uni.createSelectorQuery().select('.element').boundingClientRect(function(rect){
    console.log(rect.height); // 获取高度
}).exec();

其中，'.element'为要查询的元素的选择器，可以是class、id等。

2.2 通过this.$refs获取元素

在vue组件中，我们可以通过this.$refs来获取组件中的元素。同样，在uniapp中，我们也可以通过this.$refs来获取元素信息。

首先，需要在元素上添加ref属性，以便通过this.$refs来获取该元素。

<view ref="element" class="element" >这是一个元素</view>

接着，在vue组件中，我们可以通过以下代码来获取该元素的高度：

var height = this.$refs.element.$el.offsetHeight;

其中，this.$refs.element返回的是一个vue组件，需要通过$el属性来获取组件中的元素。offsetHeight属性可以返回一个元素的高度。

3. 组件中获取元素高度

在uniapp中，除了通过选择器和refs来获取元素高度外，我们还可以在组件中通过mounted()钩子函数获取元素高度。

在mounted()钩子函数中，组件中的元素已经挂载完毕，可以直接获取元素的高度。

export default{
    mounted(){
        var height = this.$el.offsetHeight;
    }
}

其中，this.$el表示当前组件的根元素。通过offsetHeight属性可以返回当前根元素的高度。

4. 结语

本篇文章介绍了uniapp中获取元素高度的三种方法，其中包括通过选择器、通过this.$refs、以及在组件中获取元素高度。读者可以根据自己的实际需求选择不同的方法。