Vue实现下拉加载更多

作者: 十个丶钟
来源: 51数据库
2021-09-03

熟悉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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。