更新记录

1.0.0（2025-08-21）

• 初始版本
• 实现下拉刷新功能
• 实现上拉加载更多功能

平台兼容性

uni-app x(4.75)

xudy-refresh-list 下拉刷新上拉加载组件

<template>
    <xudy-refresh-list @refresherrefresh="onRefresh" @scrollend="End">
        <list-item v-for="item in list" :key="item.id">
            <view class="item">
                <text>
                    {{ item.name }}
                </text>
            </view>
        </list-item>
        <list-item>
            <text style="text-align: center;">
                加载中...
            </text>
        </list-item>
    </xudy-refresh-list>
</template>

<script lang="uts" setup>
    import type { OnRefreshParam } from "@/uni_modules/xudy-refresh-list/components/xudy-refresh-list/types.uts"
    type AType = { id : number, name : string };
    const list = ref<Array<AType>>([])
    const loading = ref(false)
    let page = 0;

    // 模拟数据加载
    const loadData = () => {
        const newData : AType[] = []
        for (let i = 0; i < 10; i++) {
            const item : AType = {
                id: (page - 1) * 10 + i + 1,
                name: `项目 ${(page - 1) * 10 + i + 1}`
            }
            newData.push(item)
        }
        return newData
    }

    const getData = () : Promise<boolean> => {
        return new Promise<boolean>((resolve) => {
            page++;
            setTimeout(() => {
                const data = loadData();
                for (let i = 0; i < data.length; i++) {
                    list.value.push(data[i]);
                }
                console.log(list.value);
                resolve(true);
            }, 1000)
        });
    }

    // 下拉刷新
    const onRefresh = (param : OnRefreshParam) => {
        getData().then((isSuccess) => {
            if (isSuccess != null && isSuccess) {
                param.done();
            }
        })
    }

    const End = () => {
        getData();
    }

    // 初始化数据
    onMounted(() => {
        getData();
    })
</script>

<style>
    .item {
        padding: 24rpx;
        border-bottom: 1rpx solid #eee;
    }
</style>