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


Posted in Javascript onAugust 16, 2019

由于工作的原因,现在需要实现一个滚动加载(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>写到的,不然没有效果。

三、效果图

初始效果

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

滚动后的效果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
js读写json文件实例代码
Oct 21 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
vue实现简单图片上传
Jun 30 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 #Javascript
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 #Javascript
jQuery zTree树插件的使用教程
Aug 16 #jQuery
Vue 权限控制的两种方法(路由验证)
Aug 16 #Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 #Javascript
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
You might like
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python进程间通信用法实例
2015/06/04 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
python使用pymysql模块操作MySQL
2021/06/16 Python