首页vue下拉刷新加载下一页

vue下拉刷新加载下一页

时间: 2024-11-09 13:26:22 浏览: 50

在Vue.js中实现下拉刷新加载更多内容通常涉及到两个核心组件：`v-loading`（用于显示加载状态）和`infinite-scroll`（用于处理滚动事件并触发数据的分页加载）。以下是简单的步骤： 1. 首先，在你的组件模板里引入这两个依赖库，例如使用Element UI提供的`el-loading`： ```html <template> <div ref="listContainer">  <div v-if="isLoading" class="loading">正在加载...</div> <ul infinite-scroll :trigger="loadMore" :distance="200">  </ul> </div> </template> ``` 2. 定义必要的数据状态和方法： ```javascript <script> export default { data() { return { items: [], // 存放已加载的数据 isLoading: false, // 加载状态标志 page: 1, // 当前页面 perPage: 10, // 每页加载的数量 }; }, methods: { loadMore() { if (!this.isLoading && this.page < MAX_PAGES) { // 判断是否还有未加载的页面 this.isLoading = true; // 设置加载状态 // 发起网络请求加载下一页数据 axios.get('/api/data?page=' + (this.page + 1)) .then(response => { this.items.concat(response.data); // 将新数据追加到现有列表 this.page++; // 更新当前页码 this.isLoading = false; // 数据加载完成，设置加载状态为false }) .catch(error => { console.error('Error loading more data:', error); }); } }, }, }; </script> ``` 3. 上述代码中，当用户滚动到底部时（通过`infinite-scroll`监听），会触发`loadMore`方法。这个方法会在每次调用时发送一个GET请求，参数包含当前页数，然后将返回的新数据合并到现有的`items`数组。

阅读全文