vue项目中触底加载的实现

实现 Vue 滚动条触底加载可以采用以下步骤： 1. 在模板中使用 `v-infinite-scroll` 指令监听滚动事件。 2. 在 data 中定义一个变量 `page` 用于记录当前页数，初始值为 1。 3. 在 methods 中定义一个方法 `loadMore`，在该方法中通过发送 API 请求获取更多数据，并将当前页数 `page` 加 1。 4. 在 `v-infinite-scroll` 指令中绑定 `loadMore` 方法，并设置触底距离 `distance` 和加载完成后是否启用 `disabled` 状态。 以下是示例代码： ```vue <template> <div class="container" v-infinite-scroll="loadMore" :distance="distance" :disabled="isLoading"> <div v-for="item in items" :key="item.id">{{ item.title }}</div> <div v-if="isLoading">加载中...</div> </div> </template> <script> export default { data() { return { page: 1, items: [], isLoading: false, distance: 100, // 触底距离 }; }, methods: { loadMore() { if (this.isLoading) return; this.isLoading = true; axios.get(`/api/data?page=${this.page}`).then((res) => { this.items = [...this.items, ...res.data.items]; this.page++; this.isLoading = false; }); }, }, }; </script> ```