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="@/pages-home/static/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="#F5F5F5">{{ hasMore ? '加载中...' : '我是有底线的' }}</u-divider>
        </view>
    </scroll-view>
</template>

<script>
export default {
    data() {
        return {
            isRefreshing: false,
            loading: false,
            page: 1,
            hasMore: true,
            dataList: [],
        }
    },
    props: {
        url: {
            type: String,
            required: true,
            default: '/token/order/scanLogs'
        },
        pageSize: {
            type: Number,
            default: 10
        },
        slotEmpty: {
            type: Boolean,
            default: false
        },
        emptyText: {
            type: String,
        }
    },
    onLoad() {
        this.loadData()
    },
    methods: {
        // 加载数据
        async loadData(isRefresh = false) {
            if (isRefresh) {
                this.page = 1
                this.hasMore = true
            }
            if (!this.hasMore || this.loading) return

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

                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() {
            return new Promise((resolve) => {
                uni.showLoading({
                    title: '加载中...',
                })
                uni.$u.http.get(this.url, {
                    pageSize: this.pageSize,
                    pageNum: this.page
                }).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)
        },

        // 上拉加载更多
        async onLoadMore() {
            if (this.loading || !this.hasMore) return
            await this.loadData()
        },
    }
}
</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>