book-hi/components/pageScroll/index.vue

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

        <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>

        <slot></slot>

        <!-- 加载更多 -->
        <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: {
        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: {},
        },
        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;
                }
            }
        },

        // 模拟获取数据
        fetchBookList(params = {}) {
            return new Promise((resolve) => {
                uni.showLoading({
                    title: "加载中...",
                });
                uni.$u.http
                    .get(this.url, {
                        pageSize: this.pageSize,
                        pageNum: this.page,
                        ...params,
                    })
                    .then((res) => {
                        resolve({
                            list: res.rows,
                            hasMore: res.rows ? res.rows.length < res.total - this.dataList.length : 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: calc(env(safe-area-inset-bottom) + 30rpx);
}
</style>