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+vant实现购物车全选和反选功能
Nov 17 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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
PHPlet在Windows下的安装
2006/10/09 PHP
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php获取操作系统语言代码
2013/11/04 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
python正则表达式的使用
2017/06/12 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
手写一个python迭代器过程详解
2019/08/27 Python
基于python操作ES实例详解
2019/11/16 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python中uuid模块实例浅析
2020/12/29 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
婚前协议书怎么写
2014/04/15 职场文书
文体活动总结范文
2014/05/05 职场文书
2015年暑期见闻
2015/07/14 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书