欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现下拉加载更多

程序员文章站 2022-04-16 19:04:30
熟悉element-ui的开发者可能都会有这样的经历,它的无限滚动 infinitescroll 并不好用,下面介绍两种下拉加载的实现方法:1. 使用el-table-infinite-scroll...

熟悉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 下拉 加载