Uniapp监听某一元素距离顶部高度的变化

在Uniapp开发中，我们经常需要实现以下功能：当滚动页面时，来判断某一元素是否已经进入可视区域。

HTML中有一个API可以判断元素是否进入可视区域，那就是getBoundingClientRect()方法，可以获取元素相对于视窗的位置，进而通过计算来判断元素是否已经进入可视范围。

下面是一个示例代码：

<template>
  <div ref="box" @scroll="onScroll">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    onScroll() {
      const box = this.$refs.box; // 获取元素
      const { top } = box.getBoundingClientRect(); // 获取元素距离顶部的高度
      if (top <= window.innerHeight) { // 判断元素是否进入可视范围
        console.log('元素已经进入可视区域');
      }
    }
  }
}
</script>

在上述代码中，我们使用了@scroll事件监听滚动，然后获取到某个元素（本例中是一个div元素）的top位置，通过判断top位置是否小于等于视窗的高度即可判断元素是否已经进入可视区域。

然而，为了实现更加灵活的代码，我们可以将代码进行封装，封装一个自定义指令。

示例代码如下：

<template>
  <div v-scroll="onScroll">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  directives: {
    scroll: {
      inserted: function (el, binding) {
        let f = function (evt) {
          if (binding.value(evt, el)) {
            window.removeEventListener('scroll', f);
          }
        }
        window.addEventListener('scroll', f);
      }
    }
  },
  methods: {
    onScroll($event, el) {
      const { top } = el.getBoundingClientRect(); // 获取元素距离顶部的高度
      if (top <= window.innerHeight) { // 判断元素是否进入可视范围
        console.log('元素已经进入可视区域');
        return true; // 返回true，表示已经触发，可以移除事件监听
      }
      return false; // 返回false，表示未触发，需要继续监听
    }
  }
}
</script>

上述代码中，我们使用了自定义指令v-scroll来监听滚动事件，通过inserted方法获取到元素和绑定的回调函数，在滚动事件监听中判断元素距离顶部的高度是否小于等于视窗的高度，返回true代表已经触发事件，可以移除事件监听；返回false代表未触发事件，需要继续监听滚动事件。

综上所述，通过getBoundingClientRect()方法和自定义指令可以实现监听某一元素距离顶部高度的变化，从而实现更加灵活、高效的Uniapp开发。