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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
咖啡常见的种类
2021/03/03 新手入门
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
用ADODB.Stream转换
2007/01/22 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
Script的加载方法小结
2011/01/12 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python中创建二维数组
2018/10/17 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python如何读取bin文件并下发串口
2019/07/05 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
化工工艺专业求职信
2013/09/22 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
文明班集体申报材料
2014/05/23 职场文书
实习指导教师评语
2014/12/30 职场文书