From d74ec3fcdff12f29d8473150b5a15f754461b41a Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Mon, 18 Sep 2023 21:09:17 +0800 Subject: [PATCH] feat: topic detail scroll title --- src/language/en.ts | 2 +- src/language/zh.ts | 8 ++-- src/views/topic/KUNGalgameTopicPage.vue | 53 ++++++++++++++++--------- src/views/topic/components/Master.vue | 1 + 4 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/language/en.ts b/src/language/en.ts index b5eee675..c71c40e7 100644 --- a/src/language/en.ts +++ b/src/language/en.ts @@ -148,7 +148,7 @@ export default { help4: "The website's code is handwritten, and errors are inevitable.", help5: 'If you encounter any errors, please', contact: ' Contact Us.', - tags: 'Please input topic tags', + tags: 'Please input tags', hint: `Hint: (A single tag should be within 10 characters, choose at least one and up to 7 tags). You can enter text and press \`Enter\` to create a tag.`, hot: 'Popular Tags (Click to Select) : ', categories: diff --git a/src/language/zh.ts b/src/language/zh.ts index bcf3ba3e..8d02a97b 100644 --- a/src/language/zh.ts +++ b/src/language/zh.ts @@ -140,7 +140,7 @@ export default { default: '默认配置', essential: '基本配置', full: '全部配置', - tagsHint: '热门关键词提示', + tagsHint: '热门标签提示', refresh: '刷新页面生效', help1: '话题的标题长度需要在 1 到 40 字之间', help2: '您可以点击左侧的设置调整编辑器的模式', @@ -148,9 +148,9 @@ export default { help4: '网站的代码是手写的，错误在所难免', help5: '如果您遇到错误，请', contact: ' 联系我们', - tags: '请输入话题的关键词', - hint: `提示：（单个关键词 10 个字符以内，至少选择一个、最多 7 个）, 您可以输入文字后按下 ' Enter ' 创建关键词`, - hot: '热门关键词（点击选择）:', + tags: '请输入标签', + hint: `提示：（单个标签 10 个字符以内，至少选择一个、最多 7 个）, 您可以输入文字后按下 ' Enter ' 创建标签`, + hot: '热门标签（点击选择）:', categories: '点击选择话题的分区（可多选）:', Galgame: 'Galgame', Technique: '技术交流', diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue index 6e9bd5f5..63381643 100644 --- a/src/views/topic/KUNGalgameTopicPage.vue +++ b/src/views/topic/KUNGalgameTopicPage.vue @@ -9,7 +9,6 @@ import { onBeforeMount, computed, watch, - onBeforeUnmount, } from 'vue' import { onBeforeRouteLeave, useRoute } from 'vue-router' import message from '@/components/alert/Message' @@ -57,6 +56,8 @@ const repliesData = ref([]) const content = ref() // 滚动到某个话题时触发动画 const isExecuteScrollToReplyAnimate = ref(false) +// 页面滚动的距离 +const contentScrollHeight = ref(0) // 获取话题详情的函数 const getTopic = async (): Promise => { @@ -129,7 +130,7 @@ watch( ) // 滚动事件处理函数 -const scrollHandler = async () => { +const handelScroll = async () => { // 滚动到底部的处理逻辑 if (isScrollAtBottom() && isLoading.value) { // 自动增加页数 @@ -155,6 +156,9 @@ const isScrollAtBottom = () => { const scrollTop = content.value.scrollTop const clientHeight = content.value.clientHeight + // 记录页面滚动的距离给子组件 + contentScrollHeight.value = scrollTop + // 使用误差范围来比较，因为 js 浮点数不精确 const errorMargin = 1.007 return Math.abs(scrollHeight - scrollTop - clientHeight) < errorMargin @@ -171,22 +175,6 @@ onMounted(async () => { // 获取回复的数据 repliesData.value = await getReplies() - - // 获取滚动元素的引用 - const element = content.value - // 获取到了则启动监听器，监听页面滚动行为 - if (element) { - element.addEventListener('scroll', scrollHandler) - } -}) - -// 在组件卸载前，移除滚动事件监听器 -onBeforeUnmount(() => { - const element = content.value - // 如果获取到页面元素则销毁监听器 - if (element) { - element.removeEventListener('scroll', scrollHandler) - } }) /** @@ -219,6 +207,7 @@ onBeforeMount(() => {
+ @@ -227,7 +216,15 @@ onBeforeMount(() => {