Vue实现下拉加载更多
更新时间:2021年5月9日 15:01 点击:2295
熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法:
1. 使用el-table-infinite-scroll 插件
(1). 安装插件
npm install --save el-table-infinite-scroll
(2). 全局引入并注册
// main.js import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll);
(3). 局部文件引入
<script> // 引入 import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { // 注册指令 directives: { 'el-table-infinite-scroll': elTableInfiniteScroll } } </script>
(4). 使用指令
<el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore"> </el-table>
(5). 代码实例
<template> <div class="app-container"> <el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore" :data="tableList"> <!-- 表格数据省略 --> </el-table> </div> </template> <script> // 引入插件 import elTableInfiniteScroll from "el-table-infinite-scroll"; export default { name: "index", data() { return { // 表格高度 tableHeight:"", // 数据总数 tableCount:0, // 表格数据列表 tableList:[], // 是否加载中 tableLoading:false, // 表格搜索条件 tableSearch:{ page:1 } } }, // 注册指令 directives: { "el-table-infinite-scroll": elTableInfiniteScroll, }, created() { let windowHeight =document.documentElement.clientHeight || document.body.clientHeight; // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定 this.tableHeight = windowHeight - 200 + "px"; }, mounted(){ this.getTableData(this.tableSearch); }, methods: { // 请求表格数据 getTableData(search) { let page = search.page; let url = "index?page=" + page; // 首次打开页面要加载一次数据,为了防止数据过多自动触发滚动,此处需要置为加载中 this.tableLoading = true; this.$http.get(url).then((result) => { if (res.code == 10000) { // 拼接数据 this.tableList = this.tableList.concat(result.data.list); this.tableCount = result.count; this.tableSearch.page = result.current; this.tableLoading = false; } }); }, // 加载更多 loadMore() { if (!this.tableLoading) { this.tableLoading = true; if (this.tableList.length < this.tableCount) { this.tableSearch.page++; this.getTableData(this.tableSearch); } else { this.$message("已加载完所有的数据!"); this.tableLoading = false; } } }, } }; </script>
2. 自定义下拉加载方法
上面使用的插件需要依赖Element-UI,如果没有使用Element-UI,那就只能自己写一个下拉加载了,实现代码如下:
<template> <div class="app-container"> <div :style="{height:tableHeight,overflow:'auto'}" id="tableBox"> <!-- 表格数据省略 --> </div> </div> </template> <script> export default { name: "index", data() { return { // 表格高度 tableHeight:"", // 数据总数 tableCount:0, // 表格数据列表 tableList:[], // 是否加载中 tableLoading:false, // 表格搜索条件 tableSearch:{ page:1 } }; }, created(){ let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定 this.tableHeight = windowHeight - 200 +'px'; }, mounted() { this.getTableData(this.tableSearch); document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); }, beforeDestroy() { // 移除监听事件 window.removeEventListener('scroll', this.onTableScroll) }, methods: { onTableScroll(){ var obj = document.getElementById("tableBox"); var scrollHeight = obj.scrollHeight; var scrollTop = obj.scrollTop; var objHeight = obj.offsetHeight; // 100为阈值,可根据实际情况调整 if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length<this.tableCount){ this.tableLoading = true; this.tableSearch.page++; setTimeout(()=>{ this.getTableData(this.tableSearch); },300) } }, getTableData(search){ let page = search.page; let url = "index?page=" + page; // 首次打开页面要加载一次数据,为了防止数据过多自动触发滚动,此处需要置为加载中 this.tableLoading = true; this.$http.get(url).then((result) => { if (res.code == 10000) { // 拼接数据 this.tableList = this.tableList.concat(result.data.list); this.tableCount = result.count; this.tableSearch.page = result.current; this.tableLoading = false; } }); }, }, }; </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: 微信小程序实现录音Record功能
下一篇: 如何理解Vue前后端数据交互与显示
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
用js的document.write输出的广告无阻塞加载的方法
一、广告代码分析很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。复制代码 代码如下:<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5...2014-06-07- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27