book-hi/components/pageScroll/index.vue

<template>
    <!-- 列表 -->
    <scroll-view class="scroll-view" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh" @scrolltolower="onLoadMore" :style="{ height: height }">
        <!-- 空状态 -->
        <slot></slot>

        <view v-if="!loading && !dataList.length" class="empty-state">
            <view class="flex-d flex-a-c" style="padding-top: 25vh" v-if="slotEmpty">
                <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png"
                    style="width: 100%; height: 260rpx" mode="heightFix"></image>
                <view class="common-title" style="padding: 33rpx 0 20rpx 0">暂无内容</view>
                <view class="common-text" v-if="emptyText">{{ emptyText }}</view>
            </view>
            <u-empty v-else mode="list" text="暂无扫描记录" margin-top="200"></u-empty>
        </view>


        <!-- 加载更多 -->
        <view class="load-more" v-if="dataList.length > 0">
            <u-divider :bg-color="bgColor">{{ hasMore ? "加载中..." : "我是有底线的" }}</u-divider>
        </view>
    </scroll-view>
</template>

<script>
    export default {
        data() {
            return {
                isRefreshing: false,
                loading: false,
                page: 1,
                hasMore: true,
                dataList: [],
            };
        },
        props: {
            height: {
                type: String,
                default: "calc(100vh - 88rpx)",
            },
            bgColor: {
                type: String,
                default: "#F5F5F5",
            },
            url: {
                type: String,
                required: true,
                default: "/token/order/scanLogs",
            },
            pageSize: {
                type: Number,
                default: 10,
            },
            slotEmpty: {
                type: Boolean,
                default: false,
            },
            emptyText: {
                type: String,
            },
            params: {
                type: Object,
                default: {},
            },
            method: {
                type: String,
                default: 'GET'
            },
            immediate: {
                type: Boolean,
                default: true,
            },
        },
        mounted() {
            console.log(this.immediate, "immediate");
            if (this.immediate) {
                this.loadData(true);
            }
        },
        methods: {
            // 加载数据
            async loadData(isRefresh = false, params = {}) {
                if (isRefresh) {
                    this.page = 1;
                    this.hasMore = true;
                }
                if (!this.hasMore || this.loading) return;

                this.loading = true;
                try {
                    const res = await this.fetchBookList(params);

                    if (isRefresh) {
                        this.dataList = res.list;
                    } else {
                        this.dataList = [...this.dataList, ...res.list];
                    }
                    this.$emit("updateList", this.dataList);

                    this.hasMore = res.hasMore;
                    this.page++;
                } catch (error) {
                    uni.showToast({
                        title: "加载失败",
                        icon: "none",
                    });
                } finally {
                    this.loading = false;
                    if (isRefresh) {
                        this.isRefreshing = false;
                    }
                    // #ifdef MP-ALIPAY
                    my.stopPullDownRefresh()
                    // #endif
                }
            },

            // 模拟获取数据
            fetchBookList(params = {}) {
                return new Promise((resolve) => {
                    uni.showLoading({
                        title: "加载中...",
                    });
                    const requestParams = {
                        pageSize: this.pageSize,
                        pageNum: this.page,
                        ...params,
                    };
                    const requestMethod = this.method.toLowerCase();
                    const request = requestMethod === 'post' ? uni.$u.http.post(this.url, requestParams) : uni.$u.http.get(this.url, requestParams);

                    request.then((res) => {
                        resolve({
                            list: res.rows,
                            hasMore: res.rows ? (this.page * this.pageSize) < res.total : false,
                        });
                    })
                        .finally(() => {
                            uni.hideLoading();
                        });
                });
            },

            reloadData() {
                this.page = 1;
                this.fetchBookList();
            },

            // 下拉刷新
            async onRefresh() {
                if (this.loading) return;
                this.isRefreshing = true;
                await this.loadData(true, this.params);
            },

            // 上拉加载更多
            async onLoadMore() {
                if (this.loading || !this.hasMore) return;
                await this.loadData(false, this.params);
            },
        },
    };
</script>

<style lang="scss">
    .scroll-view {
        height: calc(100vh - 88rpx);
    }

    .load-more {
        width: 100%;
        display: flex;
        color: #999999;
        font-size: 24rpx;
        padding: 30rpx 0;
        justify-content: center;
        padding-bottom: 40rpx;
    }
</style>