由于工作的原因，现在需要实现一个滚动加载(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));// 页码+1this.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>写到的，不然没有效果。

三、效果图

初始效果

滚动后的效果

使用vue-mugen-scroll组件实现pc端滚动刷新相关推荐

Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
react结合antd的Cascader组件实现pc端选择城市控件
react结合antd的Cascader组件实现pc端选择城市控件业务需求,网上找了好多,发现都不太满意,于是自己写了一个 1.实现如下提示: 数据地址点击 https://xf-12521862 ...
vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
vue 实现 web端滚动刷新自定义指令
vue 实现 web端滚动刷新想实现web端的滚动刷新,我们需要判断滚动已经到达最低部,利用addEventListener监听滚动高度,触发相应的回调函数,激发加载更多数据,那么我们该怎样计算滚动 ...
vue 实现 web端滚动刷新排序筛选响应式布局 (源码)
vue 实现 web端滚动刷新排序筛选响应式布局先展示效果图源码: <template><div> <div class=&qu ...
Vue学习第36天——PC端和移动端常用的Vue UI组件库
1.移动端常用UI组件库 ① Vant Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面网址:https://vant-contrib.gitee.io/vant/#/zh-C ...
Vue/Nuxt框架开发的PC端网站兼容平板设备的
大家做项目的时候有没有遇到过一些不符合常理的开发需求,例如:开发的时候PC端和H5是两套站点,一般H5站点会适配平板设备,但是如果需要改成PC端适配平板呢:前期开发PC端没有考虑到PC端会有需要兼容平 ...
vue 侧边悬浮_Vue实现PC端靠边悬浮球的代码
我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种. 实现是这个样子: 手边没有球形图.随便找一个,功能这里演示的为单机悬浮球注销登录嗯,具体代码: :class="['meun-sw ...

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

一、准备工作

二、编码

三、效果图

使用vue-mugen-scroll组件实现pc端滚动刷新相关推荐

最新文章

热门文章