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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
JavaScript的Set数据结构详解
Feb 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
example2.php
2006/10/09 PHP
实用函数10
2007/11/08 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
在Python的Django框架中编写编译函数
2015/07/20 Python
Python中的变量和作用域详解
2016/07/13 Python
Python中标准模块importlib详解
2017/04/16 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Pytorch 实现权重初始化
2019/12/31 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
毕业生的自我评价范文
2013/12/31 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
nginx访问报403错误的几种情况详解
2022/07/23 Servers