1
0
forked from Leaf/amber-ui

修复 滚动问题

This commit is contained in:
Twilight 2024-09-16 21:53:48 +08:00
parent cd7314d79e
commit 57f36f0b64
4 changed files with 10 additions and 19 deletions

View File

@ -22,7 +22,7 @@
<div <div
class="fixed bottom-0 left-0 right-0" class="fixed bottom-0 left-0 right-0"
:class="!appStore.contentScrollOnBottom ? 'hidden' : 'mb-6'" :class="!appStore.contentScrollOnBottom && appStore.contentScrollable ? 'hidden' : 'mb-6'"
> >
<!-- <div <!-- <div
class="mx-auto w-2xl max-w-2xl text-center mb-3 animate__animated animate__pulse text-lg" class="mx-auto w-2xl max-w-2xl text-center mb-3 animate__animated animate__pulse text-lg"

View File

@ -29,11 +29,17 @@ const onScroll = (e: Event) => {
const clientHeight = target.clientHeight; const clientHeight = target.clientHeight;
appStore.contentScrollHeight = scrollHeight; appStore.contentScrollHeight = scrollHeight;
appStore.contentScrollOnBottom = scrollTop + clientHeight >= scrollHeight appStore.contentScrollOnBottom = scrollTop + clientHeight >= scrollHeight;
// //
appStore.contentScrollPosition = scrollTop; appStore.contentScrollPosition = scrollTop;
}
//
if (scrollHeight > clientHeight) {
appStore.contentScrollable = true;
} else {
appStore.contentScrollable = false;
}
};
</script> </script>
<template> <template>

View File

@ -1,20 +1,4 @@
<script setup lang="ts">
import { useMessage } from "naive-ui";
import { useUserStore } from "../stores/user";
import chat from "../components/chat/Chat.vue";
const message = useMessage();
const userStore = useUserStore();
</script>
<template> <template>
<!-- <router-link to="auth/login">go</router-link> -->
<!-- <n-dropdown trigger="hover" :options="options" @select="handleSelect">
<n-button>找个地方休息111</n-button>
</n-dropdown>
<n-button @click="logout()">退出登录</n-button> -->
<Chat /> <Chat />
</template> </template>

View File

@ -8,5 +8,6 @@ export const useAppStore = defineStore("app", {
contentScrollHeight: 0, contentScrollHeight: 0,
contentScrollPosition: 0, contentScrollPosition: 0,
contentScrollOnBottom: false, contentScrollOnBottom: false,
contentScrollable: false,
}), }),
}); });