gypsy-crm-frontend-vu/components/cwg-page-more-wrapper.vue

<template>
    <z-paging ref="paging" refresher-only @onRefresh="onRefresh" :pagingStyle="{ top: `${60 + statusBarHeight}px` }"
        :use-custom-refresher="true" refresher-default-text=" " refresher-pulling-text=" "
        refresher-refreshing-text=" ">
        <slot></slot>
    </z-paging>
</template>

<script setup>
import zPaging from "@/uni_modules/z-paging/components/z-paging/z-paging.vue";
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 },
    refresherEnabled: { type: Boolean, default: false },
    isScroll: { type: Boolean, default: true },
    height: { type: Number, default: 0 },
})
const emit = defineEmits(['reach-bottom', 'refresh'])
const paging = ref(null)
const refresherTriggered = ref(false)
const onRefresh = () => {
    emit('refresh')
}
defineExpose({
    stopRefresh: () => {
        paging.value.complete();
    }
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.loadmore-wrapper {
    /* height: calc(100vh - var(--status-bar-height)); */
    width: 100%;
    box-sizing: border-box;
}

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