由于工作的原因，现在需要实现一个滚动加载(PC端)的效果，之前使用的是vue+element，但是element没有类似的组件，所以去github上找了一个名叫vue-mugen-scroll，使用起来很简单也很方便，所以给大家分享一下如果使用。

一、准备工作

首先需要安装一下组件：

npm install --save vue-mugen-scroll

不需要全局引用，在需要的地方引用即可：

import MugenScroll from "vue-mugen-scroll";export default { components: { MugenScroll }};

二、编码

直接上代码

<template> <section> <div id="user-table" ref="user-table"> <div> <el-table :data="tableDate" border style="width: 100%"> <el-table-column prop="name" label="用户姓名"></el-table-column> </el-table> </div> <mugen-scroll :handler="loadMore" :should-handle="!loading" scroll-container="user-table"> </mugen-scroll> </div> </section></template> <script>import MugenScroll from "vue-mugen-scroll";export default { name: "app", components: { MugenScroll }, data() { return { // 加载状态 loading: false, // 当前页数 page: 1, // 总页数 pageTotal: 3, pagesize: 10, // 模拟后端返回的数据 datas: [ { id: "1", name: "用户1" }, { id: "2", name: "用户2" }, { id: "3", name: "用户3" }, { id: "4", name: "用户4" }, { id: "5", name: "用户5" }, { id: "6", name: "用户6" }, { id: "7", name: "用户7" }, { id: "8", name: "用户8" }, { id: "9", name: "用户9" }, { id: "10", name: "用户10" }, { id: "11", name: "用户11" }, { id: "12", name: "用户12" }, { id: "13", name: "用户13" }, { id: "14", name: "用户14" }, { id: "15", name: "用户15" }, { id: "16", name: "用户16" }, { id: "17", name: "用户17" }, { id: "18", name: "用户18" }, { id: "19", name: "用户19" }, { id: "20", name: "用户20" }, { id: "21", name: "用户21" }, { id: "22", name: "用户22" }, { id: "23", name: "用户23" }, { id: "24", name: "用户24" }, { id: "25", name: "用户25" }, { id: "26", name: "用户26" }, { id: "27", name: "用户27" } ], // 列表中的数据 tableDate: [] }; }, methods: { // 加载更多 loadMore() { // 是否当前page不是最后一页 if (this.page <= this.pageTotal) { console.log("loadMore..."); this.loading = true; // 模拟分页查询 let startIndex = (this.page - 1) * this.pagesize; let endIndex = startIndex + this.pagesize; this.tableDate.push(...this.datas.slice(startIndex, endIndex)); // 页码+1 this.page++; console.log(this.tableDate); this.loading = false; } } }};</script><style scoped>#user-table { width: 400px; height: 400px; overflow-y: scroll; margin: 100px auto;}</style>

说明一下，这里最主要的就是<mugen-scroll>这个标签，should-handle属性就是是否需要执行加载方法，handler就是加载的具体方法，scroll-container就是指向的元素的ref，需要注意的是，需要滚动加载的元素，如#user-table，需要设置它的具体高度，而且要设置滚动条，就像我在<style>写到的，不然没有效果。

三、效果图

初始效果

滚动后的效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。