纯净、安全、绿色的下载网站

首页

当前位置:首页IT学院IT技术

Vue下拉加载更多 Vue实现下拉加载更多

aiguangyuan   2021-05-09 我要评论
想了解Vue实现下拉加载更多的相关内容吗,aiguangyuan在本文为您仔细讲解Vue下拉加载更多的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue下拉加载更多,Vue下拉加载,Vue加载更多,下面大家一起来学习吧。

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

相关文章

猜您喜欢

  • 微信小程序拍照和相册选取图片 微信小程序实现拍照和相册选取图片

    想了解微信小程序实现拍照和相册选取图片的相关内容吗,勘察加熊人在本文为您仔细讲解微信小程序拍照和相册选取图片的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:微信小程序拍照,微信小程序相册选取图片,微信小程序相册,下面大家一起来学习吧。..
  • C语言文本编译器 C语言实现简易文本编译器

    想了解C语言实现简易文本编译器的相关内容吗,北牧尘在本文为您仔细讲解C语言文本编译器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C语言,文本编译器,下面大家一起来学习吧。..

网友评论

Copyright 2022 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们