vue滚动加载数据

Vue可以通过监听滚动事件来实现滚动加载数据。具体实现的步骤如下：

1. 在`data`中定义一个变量`scrollPosition`表示滚动条的位置，初始值为0。

2. 在`mounted`生命周期钩子中添加滚动事件监听器：

   mounted() {
     window.addEventListener('scroll', this.handleScroll);
   },

3. 在`methods`中定义`handleScroll`方法，该方法会在滚动时被触发：

   methods: {
     handleScroll() {
       const scrollHeight = document.documentElement.scrollHeight;
       const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       const clientHeight = document.documentElement.clientHeight;

       if (scrollTop + clientHeight >= scrollHeight && this.scrollPosition < scrollTop) {
         // 加载更多数据
         this.loadData();
       }

       this.scrollPosition = scrollTop;
     },
   },

4. 在`loadData`方法中加载更多数据，并更新视图：

   methods: {
     loadData() {
       // 加载更多数据
       // ...

       // 更新视图
       this.$forceUpdate();
     },
   },

注意，为了避免重复加载数据，需要在`handleScroll`方法中添加判断条件：只有当滚动到底部且滚动方向向下时，才会加载更多数据。同时，也需要在加载数据后调用`$forceUpdate()`方法来更新视图。