vue-infinite-scroll源码

vue-infinite-scroll 是一个 Vue.js 的无限滚动指令，用于在滚动到底部时加载更多内容。该指令的源码可以在 GitHub 上找到：https://github.com/ElemeFE/vue-infinite-scroll。

下面是源码的主要部分，包括指令的定义和绑定：

export default {
  bind(el, binding) {
    // ...
    el[ctx] = {
      el,
      vm: binding.instance,
      expression: binding.value,
      arg: binding.arg,
      modifiers: binding.modifiers
    }
    // ...
  },

  inserted(el, binding) {
    // ...
    el.addEventListener('scroll', el[ctx].scrollListener)
    el[ctx].vm.$on('hook:mounted', () => {
      el[ctx].scrollListener()
    })
    // ...
  },

  unbind(el) {
    // ...
    el.removeEventListener('scroll', el[ctx].scrollListener)
    // ...
  }
}

该指令的 `bind` 钩子函数会在指令第一次绑定到元素时被调用。在这里，我们会将一些信息存储到元素对象的 `__vueInfiniteScroll__` 属性中，包括元素本身、Vue 实例、绑定的表达式、指令参数和修饰符等。

`inserted` 钩子函数会在元素被插入到文档中时被调用。在这里，我们会为元素添加一个 `scroll` 事件监听器，并在 Vue 实例的 `mounted` 钩子函数中手动触发一次 `scroll` 事件，以确保在组件渲染完成后就能立即加载更多内容。

最后，`unbind` 钩子函数会在指令与元素解绑时被调用。在这里，我们会移除 `scroll` 事件监听器，以避免内存泄漏。

除了上述部分，源码中还包括了一些辅助函数，用于计算滚动条位置、判断是否已经滚动到底部等。如果您想要深入了解该指令的实现细节，可以查看其完整源码。