更新记录

1.0.0（2026-06-15） 下载此版本

首次提交代码

平台兼容性

uni-app(5.0)

Hanson-view-refresh

仅测试于 vue2, 微信小程序. 其他平台可自行测试

1. 使用方法

导入 uni_modules 后直接使用即可

<template>
    <view class="page">
        <!-- refresh是下拉刷新组件 -->
        <refresh @interrupt="handleInterrupt" @scrolltolower="handleLoadMore" :loadingMore="loading" :hasMore="hasMore"
            @scroll="" ref="pullRefreshList">
            <template slot="content">
                <!-- view的插槽里面为放你的列表组件 -->
                <view-item v-for="(item, index) in list" :key="index" :item="item"
                    @click="onItemClick(item)" />
            </template>
        </refresh>

        <!-- 配合使用 BackTop 组件,列表可一键回到顶部 -->
        <view-back-top :bottom="bottom" :right="right" :scrollTop='scrollTop' color="#ffffff"
            backgroundColor='linear-gradient(135deg, #36D1DC 0%, #51E5A8 100%)' iconType='arrow-line'
            @setScrollTop="setScrollTop"></view-back-top>
    </view>
</template>

<script>
    import viewBackTop from '../components/view-back-top/view-back-top.vue';
    import listApi from '@/api/list.js';
    export default {
        components: {
            viewBackTop,
        },
        data() {
            return {
                list: [],
                page: 1,
                pageSize: 10,
                scrollTop: 0,
                right: 50,
                bottom: 100,
                hasMore: true,
                loading: false,
            }
        },
        onLoad() {
            this.loadData();
        },
        methods: {
            // 刷新成功以及正在刷新需要调用此方法-写在父组件
            handleInterrupt() {
                this.loadData(true);
                this.$refs.pullRefreshList.finishRefresh();
            },
            // 上拉加载更多处理-写在父组件
            handleLoadMore() {
                this.loadData();
            },
            // 触发一键回到顶部-写在父组件
            setScrollTop() {
                this.$refs.pullRefreshList.handleBackTop();
            },
            // loadData此处请求仅为演示，请替换为自己项目中的请求
            async loadData(isRefresh = false) {
                if (isRefresh) {
                    this.page = 1;
                    this.hasMore = true;
                }
                if (!this.hasMore || this.loading) return;

                this.loading = true;
                try {
                    // listApi仅为演示接口,请替换为自己项目中的接口
                    const res = await listApi.getList(this.page, this.pageSize, 'left-image');
                    if (res && res.data) {
                        this.list = isRefresh ? res.data : [...this.list, ...res.data];
                        this.hasMore = res.data.length === this.pageSize;
                        this.page++;
                    }
                } catch (error) {
                    uni.showToast({
                        title: '获取数据失败',
                        icon: 'none'
                    });
                } finally {
                    this.loading = false;
                    // 调用子组件解锁方法
                    this.$refs.pullRefreshList.unlockLoadMore()
                }
            },
            // 点击卡片列表
            onItemClick(item) {
                console.log('点击了列表项:', item);
            },
            // 滚动距离赋值给BackTop组件
            (scrollTop) {
                this.currentScrollTop = scrollTop.detail.scrollTop;
                this.scrollTop = scrollTop.detail.scrollTop;
            },
        }
    }
</script>

<style>
    .page {
        height: 100vh;
    }
</style>

2. 参数说明

感谢作者： 星星liro 的源码,此组件是根据他的源码进行优化处理的,测试非常顺利!