Vue实现下拉加载更多


Posted in Vue.js onMay 09, 2021

熟悉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.js 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
如何使用vue3打造一个物料库
vue完美实现el-table列宽自适应
关于Vue Router的10条高级技巧总结
May 06 #Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 #Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
vue使用v-model进行跨组件绑定的基本实现方法
关于vue中如何监听数组变化
You might like
php调用C代码的实现方法
2014/03/11 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python简单判断序列是否为空的方法
2015/06/30 Python
Golang与python线程详解及简单实例
2017/04/27 Python
带你了解python装饰器
2017/06/15 Python
Python实现的字典值比较功能示例
2018/01/08 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
生物科学系大学生的自我评价
2013/12/20 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
经典广告词大全
2014/03/14 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2014年财务科工作总结
2014/11/11 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
庆七一活动简报
2015/07/20 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Python torch.flatten()函数案例详解
2021/08/30 Python