Vue實現下拉加載更多

Posted on by

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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：