vue-seamless-scroll数据多才滚动

可以使用vue-seamless-scroll的数据多才滚动功能来实现滚动加载更多数据。该功能允许在滚动到底部时自动触发加载更多数据。

首先，确保已经正确安装和引入了vue-seamless-scroll插件。

然后，在需要滚动加载数据的组件中，可以按照以下步骤进行设置：

1. 在data中定义一个用于存储加载的数据的数组，比如命名为dataList。

data() {
  return {
    dataList: [],
  };
},

2. 在mounted或created钩子函数中，初始化加载一部分数据到dataList中，比如使用axios获取数据。

mounted() {
  this.loadData();
},
methods: {
  loadData() {
    // 使用axios等方式获取数据，并将数据添加到dataList中
    axios.get('your_api_url').then((response) => {
      this.dataList = response.data;
    });
  },
},

3. 在模板中，使用vue-seamless-scroll的scroll事件监听滚动到底部，并调用加载数据的方法。

<template>
  <vue-seamless-scroll @scroll="handleScroll">
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.text }}</li>
    </ul>
  </vue-seamless-scroll>
</template>

4. 在methods中，编写handleScroll方法来监听滚动事件，判断是否滚动到底部，并调用加载数据的方法。

methods: {
  handleScroll(pos) {
    const { scrollTop, scrollHeight, clientHeight } = pos;
    if (scrollTop + clientHeight >= scrollHeight) {
      this.loadData();
    }
  },
},

这样，当用户滚动到底部时，会触发scroll事件，调用handleScroll方法进行判断，并自动加载更多数据到dataList中。