uniapp小程序如何获取某个元素距离底部的距离

在 uniapp 小程序中，可以使用 `uni.createSelectorQuery()` 方法获取某个元素的位置信息，进而计算出该元素距离底部的距离。

具体步骤如下：

1. 在模板中使用 `ref` 给元素添加引用。

<template>
  <div ref="myElement">Hello World</div>
</template>

2. 在组件中获取元素引用，并使用 `uni.createSelectorQuery()` 方法获取元素位置信息，计算出距离底部的距离。

<script>
export default {
  mounted() {
    // 获取元素引用
    const myElement = this.$refs.myElement

    // 创建查询对象
    const query = uni.createSelectorQuery().in(this)

    // 获取元素位置信息
    query.selectViewport().scrollOffset().exec(res => {
      const scrollTop = res[0].scrollTop
      const windowHeight = res[0].height
      query.select(myElement).boundingClientRect().exec(rect => {
        const elementTop = rect[0].top
        const elementHeight = rect[0].height
        const distanceToBottom = windowHeight - elementTop - elementHeight - scrollTop
        console.log('距离底部的距离：', distanceToBottom)
      })
    })
  }
}
</script>

在上述代码中，我们首先获取元素引用 `myElement`，然后使用 `uni.createSelectorQuery()` 方法创建查询对象，并通过 `selectViewport()` 方法获取页面视口信息，通过 `scrollOffset()` 方法获取当前页面滚动条位置，以便计算出元素在页面的位置。接着，使用 `select()` 方法获取元素位置信息，并通过 `boundingClientRect()` 方法获取元素的位置和尺寸信息。最后，根据元素位置信息和页面视口信息，计算出元素距离底部的距离。

需要注意的是，由于 `uni.createSelectorQuery()` 方法是异步执行的，因此需要在 `exec()` 方法中获取结果并处理。