vue-waterfall2 触底加载

vue-waterfall2 是一个 Vue.js 的瀑布流组件，可以实现类似 Pinterest 的布局效果。要实现触底加载功能，需要在组件中监听滚动事件，判断滚动条是否到达底部，然后触发加载更多数据的方法。

以下是一个简单的示例代码：

<template>
  <waterfall :list="list" :options="options" @scroll="handleScroll"></waterfall>
</template>

<script>
import Waterfall from 'vue-waterfall2'

export default {
  components: { Waterfall },
  data() {
    return {
      list: [], // 列表数据
      options: {
        // 瀑布流配置项
      },
      currentPage: 1, // 当前页码
      isEnd: false, // 是否已经加载完所有数据
    }
  },
  mounted() {
    this.loadMore()
  },
  methods: {
    loadMore() {
      if (this.isEnd) return
      // 发送请求获取数据，这里假设返回一个 Promise 对象
      fetchData(this.currentPage).then((data) => {
        if (data.length) {
          this.list = this.list.concat(data)
          this.currentPage++
        } else {
          this.isEnd = true
        }
      })
    },
    handleScroll(position) {
      // 监听滚动事件
      const { maxY } = position
      if (maxY <= window.innerHeight) {
        this.loadMore()
      }
    },
  },
}
</script>

在这个示例中，我们定义了一个 `list` 数组来存放列表数据，`options` 对象用来配置瀑布流效果。在 `mounted` 钩子函数中，我们首次加载数据。`loadMore` 方法用来加载更多数据，其中 `fetchData` 方法用来发送网络请求获取数据。在 `handleScroll` 方法中，我们监听了 `waterfall` 组件的滚动事件，当滚动到底部时触发加载更多数据的方法。`isEnd` 变量用来判断是否已经加载完所有数据，避免重复请求。