快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

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

创新互联公司自2013年创立以来,先为加格达奇等服务建站,加格达奇等地企业,进行企业商务咨询服务。为加格达奇企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一、准备工作

首先需要安装一下组件: 

npm install --save vue-mugen-scroll

不需要全局引用,在需要的地方引用即可:

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

二、编码

直接上代码


 

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