vue3 el-scrollbar触底加载分页

在 Vue3 中，`el-scrollbar` 是 Element UI 提供的一个用于处理滚动条的组件，而触底加载（infinite scroll 或 load more）通常是在列表滚动到底部时动态加载更多数据的技术。要在 Vue 项目中实现这种功能，你可以按照以下步骤操作： 1. 安装依赖：首先确保已安装了 Element UI 和相关的库，例如 `vue-infinite-loading`，可以使用 npm 或者 yarn 进行安装： ```bash npm install element-ui vue-infinite-loading # 或者 yarn add element-ui vue-infinite-loading ``` 2. 引入组件：在你的 Vue 组件中导入 `ElScrollbar` 和无限加载组件，如 `InfiniteScroll`： ```javascript import { ElScrollbar } from 'element-plus' import InfiniteScroll from 'vue-infinite-loading' ``` 3. 使用模板：将 `ElScrollbar` 和 `InfiniteScroll` 结合起来，并设置滚动事件监听器，当滚动到底部时触发加载更多数据的请求： ```html <template> <div class="scroll-container"> <ElScrollbar :view="list" @scroll="onScroll"> <ul v-if="!isLoading && list.length > 0"> <!-- 渲染你的列表项 --> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> <InfiniteLoading :disabled="isLoading" loading-text="正在加载..." @load="loadMoreData" ></InfiniteScroll> </ElScrollbar> </div> </template> ``` 4. 配置数据和方法：设置列表数据 `list`、加载状态 `isLoading` 和加载更多数据的方法 `loadMoreData`： ```javascript <script> export default { data() { return { list: [], // 初始化为空数组 isLoading: false, // 初始加载状态为 false // ... 其他数据和配置 } }, methods: { onScroll() { if (this.$refs.scrollbar.scrollTop + this.$refs.scrollbar.clientHeight === this.$refs.scrollbar.scrollHeight) { this.isLoading = true; // 设置加载标志为 true } }, loadMoreData() { // 模拟异步加载更多数据 setTimeout(() => { const newData = /* 加载更多的数据源 */; this.list.push(...newData); this.isLoading = false; // 加载完成后，标志设回 false }, 2000); // 调整这里的延迟时间以适应实际网络情况 } } }; </script> ```