快捷導(dǎo)航

Vue實(shí)現(xiàn)下拉加載更多

更新時(shí)間：2021年05月09日 11:20:39 作者：aiguangyuan

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)下拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

熟悉Element-UI的開發(fā)者可能都會(huì)有這樣的經(jīng)歷，它的無限滾動(dòng) InfiniteScroll 并不好用，下面介紹兩種下拉加載的實(shí)現(xiàn)方法：

1. 使用el-table-infinite-scroll 插件

(1). 安裝插件

npm install --save el-table-infinite-scroll

(2). 全局引入并注冊(cè)

// main.js
 
import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
Vue.use(elTableInfiniteScroll);

(3). 局部文件引入

<script>
// 引入
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  // 注冊(cè)指令
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>

(4). 使用指令

<el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore">
 
</el-table>

(5). 代碼實(shí)例

<template>
    <div class="app-container">
        <el-table :height="tableHeight" v-el-table-infinite-scroll="loadMore" :data="tableList">
            <!-- 表格數(shù)據(jù)省略 -->
        </el-table>
    </div>
</template>
 
<script>
// 引入插件
import elTableInfiniteScroll from "el-table-infinite-scroll";
 
export default {
    name: "index",
    data() {
        return {
            // 表格高度
            tableHeight:"",
            // 數(shù)據(jù)總數(shù)
            tableCount:0,
            // 表格數(shù)據(jù)列表
            tableList:[],
            // 是否加載中
            tableLoading:false,
            // 表格搜索條件
            tableSearch:{
                page:1
            }
        }
    },
    // 注冊(cè)指令
    directives: {
        "el-table-infinite-scroll": elTableInfiniteScroll,
    },
 
    created() {
        let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;
        // 動(dòng)態(tài)計(jì)算表格的高度，200為屏幕內(nèi)除了表格以外其他元素的高度，依實(shí)際情況而定
        this.tableHeight = windowHeight - 200 + "px";
    },
    mounted(){
        this.getTableData(this.tableSearch);
    },
 
    methods: {
        // 請(qǐng)求表格數(shù)據(jù)
        getTableData(search) {
            let page = search.page;
            let url = "index?page=" + page;
            // 首次打開頁(yè)面要加載一次數(shù)據(jù)，為了防止數(shù)據(jù)過多自動(dòng)觸發(fā)滾動(dòng)，此處需要置為加載中
            this.tableLoading = true;
            this.$http.get(url).then((result) => {
                if (res.code == 10000) {
                    // 拼接數(shù)據(jù)
                    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("已加載完所有的數(shù)據(jù)！");
                    this.tableLoading = false;
                }
            }
        },
    }
};
</script>

2. 自定義下拉加載方法

上面使用的插件需要依賴Element-UI，如果沒有使用Element-UI，那就只能自己寫一個(gè)下拉加載了，實(shí)現(xiàn)代碼如下：

<template>
    <div class="app-container">
        <div :style="{height:tableHeight,overflow:'auto'}" id="tableBox">
            <!-- 表格數(shù)據(jù)省略 -->
        </div>
    </div>
</template>
 
<script>
export default {
    name: "index",
    data() {
        return {
            // 表格高度
            tableHeight:"",
            // 數(shù)據(jù)總數(shù)
            tableCount:0,
            // 表格數(shù)據(jù)列表
            tableList:[],
            // 是否加載中
            tableLoading:false,
            // 表格搜索條件
            tableSearch:{
                page:1
            }
        };
    },
    created(){
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // 動(dòng)態(tài)計(jì)算表格的高度，200為屏幕內(nèi)除了表格以外其他元素的高度，依實(shí)際情況而定
        this.tableHeight = windowHeight - 200 +'px';
    },
    mounted() {
        this.getTableData(this.tableSearch);
        document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); 
    },
 
    beforeDestroy() {
        // 移除監(jiān)聽事件
        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為閾值，可根據(jù)實(shí)際情況調(diào)整    
            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;
            // 首次打開頁(yè)面要加載一次數(shù)據(jù)，為了防止數(shù)據(jù)過多自動(dòng)觸發(fā)滾動(dòng)，此處需要置為加載中
            this.tableLoading = true;
            this.$http.get(url).then((result) => {
                if (res.code == 10000) {
                    // 拼接數(shù)據(jù)
                    this.tableList = this.tableList.concat(result.data.list);
                    this.tableCount = result.count;
                    this.tableSearch.page = result.current;
                    this.tableLoading = false;
                }
            });
        },
        
     
    },
};
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: