微信小程序 获取高度
原标题：微信小程序 获取高度
导读：
在玩转微信小程序的过程中，我们常常需要获取一些关键元素的高度，以便实现更丰富的页面交互和视觉效果，就让我来给大家详细讲解一下如何在微信小程序中获取高度,让你的小程序看起来更加高...
在玩转微信小程序的过程中，我们常常需要获取一些关键元素的高度，以便实现更丰富的页面交互和视觉效果，就让我来给大家详细讲解一下如何在微信小程序中获取高度,让你的小程序看起来更加高大上。
我们要明确一点，小程序中获取元素高度的方法有很多种，这里我会介绍几种实用且简单的方法,帮助大家轻松搞定高度获取问题。
在wxml中定义元素高度
在小程序的wxml文件中，我们可以直接给元素设置一个固定的高度，这种方法简单直接,适合那些高度固定的元素。
<view class="container" style="height: 100px;"> <!-- 内容 --> </view>
这样，我们就给container设置了一个高度为100px的样式，但这种方法有一个缺点，就是无法适应不同设备屏幕的大小,可能导致在小屏设备上显示不全。
使用wxss获取高度
对于一些动态生成的内容，我们可以通过wxss（微信小程序的css）来获取高度,这里以一个常见例子为大家讲解：
.container {
height: 100%;
}在这个例子中，我们将container的高度设置为100%，这样它就会根据父元素的高度来适应，但如何获取父元素高度呢？接下来看第三种方法。
通过JavaScript获取高度
在小程序的JavaScript中，我们可以使用wx.createSelectorQuery()方法来获取元素的高度,以下是具体步骤：
在wxml中给需要获取高度的元素添加一个id：
<view id="container"> <!-- 内容 --> </view>
- 在js文件中，使用
wx.createSelectorQuery()方法获取元素高度：
Page({
onLoad: function() {
var that = this;
wx.createSelectorQuery().select('#container').boundingClientRect(function(rect) {
that.setData({
containerHeight: rect.height
});
}).exec();
}
});这样，我们就成功获取了container元素的高度，并将其保存在data中的containerHeight变量里,你就可以根据这个高度进行各种操作了。
注意事项和小技巧
- 获取高度时，请确保元素已经渲染完成，可以在
onReady生命周期函数中进行操作，或者在onLoad中使用setTimeout延时获取。 - 如果元素高度受到内容影响,建议在内容加载完成后重新获取高度。
- 在某些情况下，可能需要多次执行
exec()方法才能获取到正确的高度。
通过以上几种方法，相信大家已经对微信小程序获取高度有了更深入的了解，在实际开发过程中，我们可以根据具体情况选择合适的方法，让小程序的页面更加美观、实用,下面是一些常见问答：
Q: 为什么我在获取高度时,得到的值是0？
A: 可能是因为元素还没有渲染完成，建议在onReady或使用setTimeout延时获取。
Q: 能否获取屏幕高度？
A: 当然可以，使用wx.getSystemInfoSync().windowHeight即可获取屏幕高度。
就是关于微信小程序获取高度的全部内容，希望对大家有所帮助,让我们一起打造更优秀的小程序吧！
