前言

普遍存在於各種app中的上拉載入下拉重新整理功能大家xwdLDaXxrI都不陌生吧，一般來說，在資料量比較大的情況下，為了更快的渲染和給使用者更好的觀感體驗，我們會將資料做分頁處理，讓其批量載入，這樣一來，在渲染速度上，能給使用者一個比較好的體驗效果。話說回來，分頁處理，也就是我們今天要講的上拉載入和下拉重新整理。

實現思路

下拉重新整理：

請求介面賦完值後，將介面返回資料長度與總條數進行比較控制載入不載入的狀態，在下拉重新整理方法中定義起始頁碼為第一頁，調整載入的狀態為false，最後呼叫請求資料的介面方法，做適當輕提示即可。

上拉載入：

首先在data中定義一個新的陣列用於將新載入的資料與老的資料合併，在上拉載入方法中讓載入的頁碼遞增，然後請求介面進行賦值，將介面返回資料迴圈並將資料新增到list陣列中，將返回資料長度與總條數進行比較控制載入不載入的狀態實現上拉載入。

話不多說，下面進入例項開發。以下是我為了方便大家理解做的一個小demo，大家可以根據相關程式碼及註釋快速上手操作。

<template>
    <div>
        <!-- van-pull-refresh：下拉重新整理 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- 上拉載入 -->
            <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="沒有更多了"
                @load="onLoad" :offset="20">
 
;
                <div class="outerBox" v-for="(item,index) in list" :key=xwdLDaXxrI"index">
                    <div>公司名稱：{{item.gsmc}}</div>
                    <div>行業類別：{{item.hylb}}</div>
                    <div>進車限值：{{item.jcxz}}</div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
    import {getPassAnalysisList} from '@/api/enforcement' //引入介面檔案
    export default {
        data() {
            return {
                //傳遞給後端的引數
                incomePayData: {
                    pageNumber: 1,//請求第幾頁
                    pageSize: 10,//每頁請求的數量
                },list: [],//列表資料
                listTwo: [],//用於上拉載入時將資料合併
                total: 0,//總頁數
                isLoading: false,//下拉重新整理
                loading: false,//上拉載入
                finished: false,//載入與不載入的狀態
            }
        },mounted() {
            this.getPassAnalysisList(); //列表資料介面
        },methods: {
            //列表資料接http://www.cppcns.com
 
口
            getPassAnalysisList() {
                getPassAnalysisList(this.incomePayData).then(res => {
                    if (res.code == '10000') {
                        this.list = res.data.records; //將介面返回賦值data定義的陣列
                        this.total = res.data.total; //將介面返回的總資料條數賦值data中定義的total
                        if (this.list.length >= this.total) { //將返回資料長度與總條數進行比較控制載入不載入的狀態
                            this.finished = true;
                        }
                    }
                })
            },//下拉重新整理
            onRefresh() {
                this.incomePayData.pageNumber = 1; //起始為第一頁
                this.finished = false; //載入與不載入的狀態
                setTimeout(() => {
                    this.isLoading = false; //下拉重新整理狀態
                    this.getPassAnalysisList() //重新整理成功呼叫列表方法
                    this.$toast('重新整理成功'); //輕提示資訊
                },700);
            },//上拉載入
            onLoad() {
                this.incomePayData.pageNumber++; //載入時頁碼遞增
                getPassAnalysisList(this.incomePayData).then(res => {
                    if (res.code == '10000') {
                        this.listTwo = res.data.records; //將介面返回賦值data定義的陣列
                        this.total = res.data.total; //將介面返回的總資料條數賦值data中定義的total
                        this.listTwo.forEach(item => { //迴圈返回的資料並將資料新增到list中
                            this.list.push(item)
                        })
                        // 載入狀態結束 狀態更新為false
                        this.loading = false;
                        if (this.list.length >= this.total) { //將返回資料長度與總條數進行比較控制載入不載入的狀態
                            this.finished = true;
                        }
                    }
                })
            },}
    }
</script>
<style scoped>
    /* 外層盒子的樣式 */
    .outerBox {
        padding: 10px;
        box-shadow: 0px 1px 4px rgba(0,0.3),0px 0px 20px rgba(0,0.1) inset;
        margin: 0px 16px 16px 16px;
        overflow: hidden;
    }
</style>

至此，這個小功能就實現啦，下圖是實現的效果展示，感興趣的話可以自己私下試試喲。

到此這篇關於基於vant實現上拉載入下拉重新整理的文章就介紹到這了,更多相關vue vant上拉載入下拉重新整理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！