Refresh.vue中，

<template>
<scroll-view
style="height: 100%"
scroll-y="true"
refresher-enabled="true"
:refresher-triggered="triggered"
:refresher-threshold="80"
refresher-background="transparent"
@refresherrefresh="onRefresh"
@scrolltolower="loadMore">
<slot></slot>
</scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const emit = defineEmits(['loadMore', 'refreshFn'])
let triggered = ref(false)
const onRefresh = () => {
triggered.value = true
emit('refreshFn')
}
const loadMore = () => {
emit('loadMore')
}
const finish = () => {
triggered.value = false
}
defineExpose({
finish,
})
</script>

<style lang="scss" scoped>
.uni-refresh-view::before {
/* 使用伪元素添加自定义loading图标 /
content: '↺'; / 或者使用图片 */
color: #333;
font-size: 20px;
}
</style>

调用方式:
import Refresh from "@/v2/components/refresh"

<Refresh ref="refreshRef" @refreshFn="downRefresh">

//界面的数据块内容
</Refresh>

let refreshRef = ref(null)

//下拉刷新的业务逻辑
const downRefresh = async() => {
await init()
refreshRef.value.finish()
}