fix: page issues

This commit is contained in:
Rogee
2024-09-21 15:19:13 +08:00
parent 2057de4859
commit 8c0e534049
2 changed files with 14 additions and 8 deletions

View File

@@ -4,8 +4,8 @@
<template v-else>
<ListItem v-for="message in messages" :key="message.ID" :item="message" />
<div class="flex items-center justify-center">
<button class="px-4 py-2 hover:bg-slate-100 rounded border text-xl font-semibold w-full"
<div class="flex items-center justify-center mb-10">
<button class="py-2 hover:bg-slate-100 rounded border text-xl font-bold w-full"
@click="loadMore">LoadMore</button>
</div>
</template>
@@ -28,6 +28,11 @@ const messages = ref([]);
const loadMore = async () => {
// router goto next page
// offset is last message ID
// page scroll to top with animation
window.scrollTo({ top: 0, behavior: "smooth" });
messages.value = [];
const offset = messages.value[messages.value.length - 1].ID
router.push({
name: "channel-messages",
@@ -39,8 +44,6 @@ const loadMore = async () => {
messages.value = await getChannelMessages(route.params.channel, { offset: offset });
console.log("messages", messages.value);
// page scroll to top with animation
window.scrollTo({ top: 0, behavior: "smooth" });
}
onMounted(async () => {

View File

@@ -6,8 +6,8 @@
<template v-else>
<ListItem v-for="message in messages" :key="message.ID" :item="message" />
<div class="flex items-center justify-center">
<button class="px-4 py-2 hover:bg-slate-100 rounded border text-xl font-semibold w-full"
<div class="flex items-center justify-center mb-10">
<button class="py-4 hover:bg-slate-100 rounded border text-xl font-bold w-full"
@click="loadMore">LoadMore</button>
</div>
</template>
@@ -26,6 +26,11 @@ const messages = ref([]);
const loadMore = async () => {
// router goto next page
// offset is last message ID
// page scroll to top with animation
window.scrollTo({ top: 0, behavior: "smooth" });
messages.value = [];
const offset = messages.value[messages.value.length - 1].ID
router.push({
name: "favorite-messages",
@@ -37,8 +42,6 @@ const loadMore = async () => {
messages.value = await getFavoriteMessages({ offset: offset });
console.log("messages", messages.value);
// page scroll to top with animation
window.scrollTo({ top: 0, behavior: "smooth" });
}
onMounted(async () => {