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 动态生成私有变量访问器
Dec 06 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
js实现加载更多功能实例
Oct 27 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 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
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
详解python持久化文件读写
2019/04/06 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
python实现拼接图片
2020/03/23 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
Java基础知识面试要点
2016/07/29 面试题
JAVA和C++区别都有哪些
2015/03/30 面试题
十佳大学生事迹材料
2014/01/29 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
家属答谢词
2015/01/05 职场文书
迎新生欢迎词
2015/01/23 职场文书
心灵点滴观后感
2015/06/02 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Mysql中mvcc各场景理解应用
2022/08/05 MySQL