Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

🚸 调整合集组件改版后的滚动逻辑

Browse Source
This commit is contained in:
目棃
2024-12-30 09:20:00 +08:00
parent 377caed0f4
commit f154ae4836
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/viewPost/vp-overlay-collection.vue
View File

@@ -6,6 +6,10 @@
<span>合集ID：{{ props.collection.collection_id }}</span> <span>合集ID：{{ props.collection.collection_id }}</span>
</div> </div>
<div class="tpoc-list" ref="postListRef"> <div class="tpoc-list" ref="postListRef">
<div class="tpoc-load" v-if="posts.length === 0">
<v-progress-circular indeterminate color="primary" size="24" />
<span>加载中...</span>
</div>
<div <div
class="tpoc-item" class="tpoc-item"
v-for="(item, index) in posts" v-for="(item, index) in posts"
@@ -45,7 +49,7 @@
import TOverlay from "@comp/app/t-overlay.vue"; import TOverlay from "@comp/app/t-overlay.vue";
import showSnackbar from "@comp/func/snackbar.js"; import showSnackbar from "@comp/func/snackbar.js";
import Mys from "@Mys/index.js"; import Mys from "@Mys/index.js";
import { computed, onMounted, shallowRef, useTemplateRef, watch } from "vue"; import { computed, nextTick, onMounted, shallowRef, useTemplateRef, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { timestampToDate } from "@/utils/toolFunc.js"; import { timestampToDate } from "@/utils/toolFunc.js";
@@ -70,15 +74,15 @@ const visible = computed<boolean>({
set: (v) => emits("update:modelValue", v), set: (v) => emits("update:modelValue", v),
}); });
watch( watch(
() => visible.value, () => [visible.value, posts.value],
async (value) => { async () => {
if (value) { if (visible.value && posts.value.length > 0) {
await new Promise<void>((resolve) => setTimeout(resolve, 500)); await nextTick();
if (postListEl.value === null || props.collection.total < 5) return; if (postListEl.value === null || props.collection.total < 5) return;
let topNum: number; let topNum: number;
if (props.collection.total - props.collection.cur < 3) topNum = props.collection.total; if (props.collection.total - props.collection.cur < 3) topNum = props.collection.total;
else topNum = props.collection.cur - 3; else topNum = props.collection.cur - 3;
postListEl.value.scrollTo({ top: topNum * 69, behavior: "smooth" }); postListEl.value.scrollTo({ top: topNum * 87, behavior: "smooth" });
} }
}, },
); );
@@ -143,6 +147,16 @@ async function toPost(postId: string, index: number): Promise<void> {
row-gap: 5px; row-gap: 5px;
} }
.tpoc-load {
position: relative;
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
column-gap: 5px;
}
.tpoc-item { .tpoc-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;