fix VInfiniteScroll

This commit is contained in:
jxxghp
2024-04-19 13:56:57 +08:00
parent 40cdb820fb
commit cfbc5802e4
4 changed files with 18 additions and 11 deletions
@@ -57,7 +57,7 @@ async function loadHistory({ done }: { done: any }) {
isRefreshed.value = true isRefreshed.value = true
if (currData.value.length === 0) { if (currData.value.length === 0) {
// 如果没有数据,跳出 // 如果没有数据,跳出
done('error') done('empty')
} else { } else {
// 合并数据 // 合并数据
historyList.value = [...historyList.value, ...currData.value] historyList.value = [...historyList.value, ...currData.value]
@@ -156,6 +156,9 @@ const dropdownItems = ref([
<template #loading> <template #loading>
<LoadingBanner /> <LoadingBanner />
</template> </template>
<template #empty>
没有更多数据
</template>
<template v-for="(item, i) in historyList" :key="i"> <template v-for="(item, i) in historyList" :key="i">
<VListItem> <VListItem>
<template #prepend> <template #prepend>
@@ -212,9 +215,6 @@ const dropdownItems = ref([
</template> </template>
</VListItem> </VListItem>
</template> </template>
<VCardText v-if="historyList.length == 0 && isRefreshed" class="text-center">
没有数据
</VCardText>
</VInfiniteScroll> </VInfiniteScroll>
</VList> </VList>
</VCard> </VCard>
+5 -3
View File
@@ -71,13 +71,15 @@ async function fetchData({ done }: { done: any }) {
isRefreshed.value = true isRefreshed.value = true
if (currData.value.length === 0) { if (currData.value.length === 0) {
// 如果没有数据,跳出 // 如果没有数据,跳出
done('error') done('empty')
return return
} }
// 合并数据 // 合并数据
dataList.value = [...dataList.value, ...currData.value] dataList.value = [...dataList.value, ...currData.value]
// 页码+1 // 页码+1
page.value++ page.value++
// 返回加载成功
done('ok')
} }
} }
else { else {
@@ -92,7 +94,7 @@ async function fetchData({ done }: { done: any }) {
isRefreshed.value = true isRefreshed.value = true
if (currData.value.length === 0) { if (currData.value.length === 0) {
// 如果没有数据,跳出 // 如果没有数据,跳出
done('error') done('empty')
} else { } else {
// 合并数据 // 合并数据
dataList.value = [...dataList.value, ...currData.value] dataList.value = [...dataList.value, ...currData.value]
@@ -107,7 +109,6 @@ async function fetchData({ done }: { done: any }) {
} }
catch (error) { catch (error) {
console.error(error) console.error(error)
// 返回加载失败 // 返回加载失败
done('error') done('error')
} }
@@ -127,6 +128,7 @@ async function fetchData({ done }: { done: any }) {
@load="fetchData" @load="fetchData"
> >
<template #loading /> <template #loading />
<template #empty />
<div <div
v-if="dataList.length > 0" v-if="dataList.length > 0"
class="grid gap-4 grid-media-card mx-3" class="grid gap-4 grid-media-card mx-3"
+3 -2
View File
@@ -63,7 +63,7 @@ async function fetchData({ done }: { done: any }) {
isRefreshed.value = true isRefreshed.value = true
if (currData.value.length === 0) { if (currData.value.length === 0) {
// 如果没有数据,跳出 // 如果没有数据,跳出
done('error') done('empty')
} else { } else {
// 合并数据 // 合并数据
dataList.value = [...dataList.value, ...currData.value] dataList.value = [...dataList.value, ...currData.value]
@@ -88,7 +88,7 @@ async function fetchData({ done }: { done: any }) {
isRefreshed.value = true isRefreshed.value = true
if (currData.value.length === 0) { if (currData.value.length === 0) {
// 如果没有数据,跳出 // 如果没有数据,跳出
done('error') done('empty')
} else { } else {
// 合并数据 // 合并数据
dataList.value = [...dataList.value, ...currData.value] dataList.value = [...dataList.value, ...currData.value]
@@ -122,6 +122,7 @@ async function fetchData({ done }: { done: any }) {
@load="fetchData" @load="fetchData"
> >
<template #loading /> <template #loading />
<template #empty />
<div <div
v-if="dataList.length > 0 && props.type === 'tmdb'" v-if="dataList.length > 0 && props.type === 'tmdb'"
class="grid gap-4 grid-media-card mx-3" class="grid gap-4 grid-media-card mx-3"
+6 -2
View File
@@ -82,7 +82,7 @@ async function loadMessages({ done }: { done: any }) {
} }
else { else {
// 没有新数据 // 没有新数据
done('error') done('empty')
} }
// 取消加载中 // 取消加载中
loading.value = false loading.value = false
@@ -111,15 +111,19 @@ onBeforeUnmount(() => {
<template> <template>
<VInfiniteScroll <VInfiniteScroll
mode="intersect" :mode="!isLoaded ? 'intersect' : 'manual'"
side="start" side="start"
:items="messages" :items="messages"
class="overflow-hidden" class="overflow-hidden"
@load="loadMessages" @load="loadMessages"
load-more-text="加载更多 ..."
> >
<template #loading> <template #loading>
<LoadingBanner /> <LoadingBanner />
</template> </template>
<template #empty>
没有更多数据
</template>
<div> <div>
<VRow <VRow
v-for="(msg, index) in messages" v-for="(msg, index) in messages"