vue-scroll使用代码

Vue-scroll是一个用于Vue.js的无限滚动指令，可以实现页面滚动时自动加载更多内容的功能。以下是使用Vue-scroll的代码示例：

1. 安装vue-scroll

在终端中执行以下命令安装vue-scroll：

npm install vue-scroll

2. 导入vue-scroll

在需要使用vue-scroll的组件中导入vue-scroll：

import VueScroll from 'vue-scroll'

3. 注册vue-scroll

在Vue实例中使用Vue-scroll：

Vue.use(VueScroll)

4. 使用vue-scroll

在需要实现无限滚动的元素上添加v-scroll指令：

<div v-scroll="loadMore"></div>

loadMore是一个自定义方法，用于加载更多内容。当元素滚动到底部时，vue-scroll会自动调用该方法。

完整示例代码如下：

<template>
  <div v-scroll="loadMore">
    <div v-for="item in list" :key="item.id">{{ item.title }}</div>
  </div>
</template>

<script>
import VueScroll from 'vue-scroll'

export default {
  data() {
    return {
      list: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 10 // 每页数据条数
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      // 发送请求获取数据
      axios.get('/api/list', {
        params: {
          page: this.page,
          pageSize: this.pageSize
        }
      }).then(response => {
        this.list = this.list.concat(response.data)
        this.page++
      })
    },
    // 加载更多
    loadMore() {
      this.loadData()
    }
  },
  directives: {
    scroll: VueScroll
  }
}
</script>

在这个示例中，当页面滚动到底部时，会自动调用loadMore方法加载更多数据。通过这种方式，可以实现无限滚动加载内容的功能。