Vue 环境下，封装一个滚动模块曝光事件，让代码更优雅！

2023-11-01 04:09:35

在 Vue.js 开发中，我们经常会遇到需要监听滚动条滚动时触发某个事件的情况。例如，当用户滚动到某个模块时，加载更多数据或显示/隐藏导航栏等。通常情况下，我们会使用 window.addEventListener('scroll', callback) 来实现这个功能。

但如果我们有多个模块需要监听滚动曝光事件，这种方式就会变得很繁琐。为了简化代码，我们可以封装一个 Vue 指令来实现这个功能。

封装 Vue 滚动模块曝光事件指令

首先，我们创建一个名为 scroll-exposure 的 Vue 指令。指令的用法如下：

<div v-scroll-exposure="handleExposure">
  <!-- 模块内容 -->
</div>

其中，handleExposure 是一个方法，当模块曝光时触发。

在 Vue 实例中，我们可以这样使用这个指令：

new Vue({
  el: '#app',
  methods: {
    handleExposure(event) {
      // 模块曝光时的处理逻辑
    }
  }
})

实现指令

现在，我们来实现这个指令的具体逻辑。

在 scroll-exposure 指令中，我们需要做以下几件事：

在指令绑定的元素上监听 scroll 事件。
在 scroll 事件处理函数中，计算元素是否曝光。
如果元素曝光，触发 handleExposure 方法。

以下是如何实现这些步骤的代码：

Vue.directive('scroll-exposure', {
  bind: function (el, binding, vnode) {
    window.addEventListener('scroll', this.handleScroll.bind(this))
  },
  unbind: function (el, binding, vnode) {
    window.removeEventListener('scroll', this.handleScroll.bind(this))
  },
  handleScroll: function (event) {
    const rect = el.getBoundingClientRect()
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      this.vm[binding.expression]()
    }
  }
})

使用指令

现在，我们已经封装好了滚动模块曝光事件指令，就可以在 Vue 项目中使用了。

例如，在下面的代码中，我们使用 scroll-exposure 指令来监听一个模块的滚动曝光事件，当模块曝光时，加载更多数据：

<div v-scroll-exposure="loadMore">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <button @click="loadMore">加载更多</button>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      items: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    loadMore() {
      // 加载更多数据
      this.items.push('item' + (this.items.length + 1))
    }
  }
})