vue-mugen-scroll组件实现pc端滚动刷新

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

一、准备工作

首先需要安装一下组件： 

npm install --save vue-mugen-scroll

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

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

二、编码

直接上代码

 


#user-table {
 width: 400px;
 height: 400px;
 overflow-y: scroll;
 margin: 100px auto;
}

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

三、效果图

初始效果

滚动后的效果

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