Vue实现下拉加载更多
程序员文章站
2022-04-16 19:04:30
熟悉element-ui的开发者可能都会有这样的经历,它的无限滚动 infinitescroll 并不好用,下面介绍两种下拉加载的实现方法:1. 使用el-table-infinite-scroll...
熟悉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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 随机应变配置 随机应变最低配置及要求
下一篇: 代理之刃零配置 代理之刃零最低配置及要求
推荐阅读
-
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
-
Android ListView实现下拉加载功能
-
Android控件PullRefreshViewGroup实现下拉刷新和上拉加载
-
Android使用ListView实现下拉刷新及上拉显示更多的方法
-
Android Recyclerview实现上拉加载更多功能
-
jQuery+vue.js实现的多选下拉列表功能示例
-
iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码
-
vue+axios+element ui 实现全局loading加载示例
-
Spring实现上拉刷新和下拉加载效果
-
jQuery+PHP+ajax实现微博加载更多内容列表功能