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怎么實現下拉加載更多”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！