Vue怎么实现下拉加载更多

这篇文章给大家分享的是有关Vue怎么实现下拉加载更多的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

vue是什么

Vue是一套用于构建用户界面的渐进式javascript框架，Vue与其它大型框架的区别是，使用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 : 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怎么实现下拉加载更多”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！