ucard-person-app-front/components/cwg-load-more-wrapper.vue

<template>
    <scroll-view 
        scroll-y 
        :lower-threshold="lowerThreshold"
        :refresher-enabled="refresherEnabled"
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="onRefresherRefresh"
        @refresherrestore="onRefresherRestore"
        :style="{ height: `calc(100vh - ${statusBarHeight + height +  60}px)` }" 
        @scrolltolower="emitReachBottom"
        class="loadmore-wrapper">
        <slot></slot>
        <view class="loading" v-if="loading">{{ t('common.loading') }}</view>
        <view class="finished" v-if="finished">{{ t('common.noMore') }}</view>
    </scroll-view>
</template>

<script setup>
import { computed, defineEmits, defineProps, ref } from 'vue'
import useGlobalStore from '@/stores/use-global-store'
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const globalStore = useGlobalStore()
const statusBarHeight = computed(() => globalStore.statusBarHeight);
const props = defineProps({
    lowerThreshold: { type: Number, default: 200 },
    loading: { type: Boolean, default: false },
    finished: { type: Boolean, default: false },
    refresherEnabled: { type: Boolean, default: false },
    isScroll: { type: Boolean, default: true },
    height: { type: Number, default: 0 },
})
const emit = defineEmits(['reach-bottom', 'refresh'])

const refresherTriggered = ref(false)

const emitReachBottom = () => {
    emit('reach-bottom')
}

const onRefresherRefresh = () => {
    refresherTriggered.value = true
    emit('refresh')
}

const onRefresherRestore = () => {
    refresherTriggered.value = false
}

defineExpose({
    stopRefresh: () => {
        refresherTriggered.value = false
    }
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";
.loadmore-wrapper {
    /* height: calc(100vh - var(--status-bar-height)); */
    width: 100%;
    box-sizing: border-box;
}

.loading,
.finished {
    text-align: center;
    padding: px2rpx(20);
    color: #888;
}
</style>