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 22 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 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版微信js-sdk支付接口类用法示例
2016/10/12 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
opencv python如何实现图像二值化
2020/02/03 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
使用python实现飞机大战游戏
2020/03/23 Python
基于Python实现天天酷跑功能
2021/01/06 Python
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
关于打架的检讨书
2014/01/17 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
大学生村官个人总结
2015/02/15 职场文书
培训通知
2015/04/17 职场文书
科技馆观后感
2015/06/08 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书