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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
详解element-ui中表单验证的三种方式
Sep 18 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
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
python人人网登录应用实例
2014/09/26 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python中turtle作图示例
2017/11/15 Python
Python实现自动发送邮件功能
2021/03/02 Python
PyQt5每天必学之组合框
2018/04/20 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python读取实时数据流示例
2019/12/02 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
Django框架请求生命周期实现原理
2020/11/13 Python
flask框架中的cookie和session使用
2021/01/31 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
世界地球日活动总结
2015/02/09 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
mysqldump进行数据备份详解
2022/07/15 MySQL