实际项目中的运用

PullRefresh 下拉刷新

下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

list 触底加载下一页

List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

注意事项：需要改动的地方已标注：“上拉刷新”与“触底加载需要改动的位置”

<template>
    <div>

        <!-- 上拉刷新 1 -->
        <loading-view :is-loading="addressModel.loading"></loading-view>

        <van-pull-refresh v-model="freshing" success-text="刷新成功" @refresh="onRefresh" class="refresh-style">

            <!-- @load滚动条与底部距离小于 offset 时触发 -->
            <list v-model:IsLoading="addressModel.IsLoading" :finished="addressModel.finished" finished-text="没有更多了"
                @load="onLoad" :immediate-check="false" :offset="15">

                <!-- 触底加载需要改动的位置 1 -- 渲染数据 -->
                <div v-for="(item, index) in cardList" :key="index"
                    style="background-color: rgb(246, 235, 236);margin-top: 30px; height: 300px;">
                    {{ index }} ---- {{ item.tel }}
                </div>

            </list>
        </van-pull-refresh>
    </div>
</template>
<script setup>
import cardApi from '../../api/card.api'; // 触底加载需要改动的位置 2 --- 引入接口文件
import { ref, onMounted, reactive } from "vue";
import { List, showToast } from 'vant'; //上拉刷新2


// 触底加载需要改动的位置 3 --- 存储的数组
const cardList = ref([]);   //这是存储的数组
const addressModel = reactive({
    init: false,
    pageNum: 1,
    pageSize: 3,
    loading: true,  //上拉刷新 3
    IsLoading: false, // 非加载中，IsLoading 为 false
    finished: false,  //是否已加载完成，加载完成后不再触发 load 事件  ：初始值一定要给false：表示所有数据都加载完毕。不允许再次触发@load事件。
    error: false,
    errorText: "请求失败，点击重新加载",
    finishedText: "没有更多了"
})


//上拉刷新 4
const freshing = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        addressModel.pageNum = 1
        addressModel.IsLoading = false
        addressModel.finished = false
        GetUserPages()
    }, 1000);
};


onMounted(async () => {
    GetUserPages()
})


const GetUserPages = () => {

    // 触底加载需要改动的位置 4 --- 接口
    cardApi.userPage({ pageNum: addressModel.pageNum, pageSize: addressModel.pageSize }).then(res => {
        if (res.code == 200) {
            cardList.value = res.data.records   //将请求到的列表赋值给cardList

            addressModel.loading = false  //上拉刷新 5
            if (freshing.value) {
                showToast('已是最新数据');
                freshing.value = false;
            }
        }
    }).catch(err => {
        console.log('错误', err)
    })
}


const onLoad = async () => {
    console.log("滑动到底部了")
    addressModel.pageNum++; //当前页：


    // 触底加载需要改动的位置 5 --- 接口
    cardApi.userPage({ pageNum: addressModel.pageNum, pageSize: addressModel.pageSize }).then(res => {
        if (res.code == 200) {
            console.log(res)

            if (res.data.records.length === 0) {  //说明没有获取到数据，也就是说所有的数据全部取完了，真正的到底了
                addressModel.IsLoading = true;
                addressModel.finished = true;
            } else {
                addressModel.IsLoading = false; //表示允许再次触发@load事件
                cardList.value = [...cardList.value, ...res.data.records]  //将请求到的列表赋值给cardList
            }

        }
    }).catch(err => {
        console.log('错误', err)
    })

}

</script>

.refresh-style{
    background: paleturquoise;
    width: 100%;
    height: 100%;
}

常见问题

PullRefresh 的内容未填满屏幕时，只有一部分区域可以下拉？

默认情况下，下拉区域的高度是和内容高度保持一致的，如果需要让下拉区域始终为全屏，可以给 PullRefresh 设置一个与屏幕大小相等的最小高度：

PullRefresh 的触发条件是？
PullRefresh 的触发条件是「父级滚动元素的滚动条在顶部位置」。

如果最近一个可滚动的父级元素是 window，则要求 window.pageYOffset === 0。
如果最近一个可滚动的父级元素是 Element，则要求 Element.scrollTop === 0。