76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<scroll-view
|
|
scroll-y
|
|
refresher-enabled
|
|
enable-back-to-top
|
|
refresher-background="#222"
|
|
:refresher-triggered="refresherTriggered"
|
|
:refresher-threshold="100"
|
|
@refresherabort="onRefresherAbort"
|
|
@refresherrefresh="onRefresherRefresh"
|
|
@scrolltolower="onScrollToLower"
|
|
@scroll="(e: any) => emit('scroll', e)"
|
|
v-bind="attrs"
|
|
>
|
|
<slot />
|
|
<uni-load-more
|
|
:status="loadMoreStatus"
|
|
:content-text="loadMoreContent"
|
|
@clickLoadMore="onScrollToLower"
|
|
/>
|
|
<view style="height: 100rpx"></view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive, ref, useAttrs } from 'vue';
|
|
|
|
const attrs = useAttrs();
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
loadMoreStatus?: 'more' | 'loading' | 'noMore';
|
|
}>(),
|
|
{
|
|
loadMoreStatus: 'noMore',
|
|
},
|
|
);
|
|
const emit = defineEmits<{
|
|
(e: 'refresh', done: () => void): void;
|
|
(e: 'loadMore'): void;
|
|
(e: 'scroll', event: any): void;
|
|
}>();
|
|
|
|
const refresherTriggered = ref(false);
|
|
|
|
const loadMoreContent = reactive({
|
|
contentdown: '正在加载...',
|
|
contentrefresh: '正在加载...',
|
|
contentnomore: '没有更多数据了',
|
|
});
|
|
|
|
onMounted(() => {
|
|
onScrollToLower();
|
|
});
|
|
|
|
// 下拉刷新中止
|
|
const onRefresherAbort = () => {
|
|
refresherTriggered.value = false;
|
|
};
|
|
|
|
// 触发下拉刷新
|
|
const onRefresherRefresh = () => {
|
|
refresherTriggered.value = true;
|
|
emit('refresh', () => {
|
|
refresherTriggered.value = false;
|
|
});
|
|
};
|
|
|
|
// 触发上拉加载
|
|
const onScrollToLower = () => {
|
|
if (props.loadMoreStatus === 'loading' || props.loadMoreStatus === 'noMore') {
|
|
return;
|
|
}
|
|
emit('loadMore');
|
|
};
|
|
</script>
|