perf(P3): Feed 流虚拟滚动 — 仅渲染当前±1条视频
This commit is contained in:
6
frontend/src/views/HomeView.vue
vendored
6
frontend/src/views/HomeView.vue
vendored
@@ -71,6 +71,11 @@ const filteredItems = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const activeItem = computed(() => filteredItems.value[activeIndex.value] ?? null)
|
const activeItem = computed(() => filteredItems.value[activeIndex.value] ?? null)
|
||||||
|
const visibleRange = computed(() => {
|
||||||
|
const idx = activeIndex.value
|
||||||
|
const len = filteredItems.value.length
|
||||||
|
return { start: Math.max(0, idx - 1), end: Math.min(len - 1, idx + 1) }
|
||||||
|
})
|
||||||
const myAccountId = computed(() => auth.claims?.account_id ?? 0)
|
const myAccountId = computed(() => auth.claims?.account_id ?? 0)
|
||||||
|
|
||||||
function setVideoRef(id: number, el: HTMLVideoElement | null) {
|
function setVideoRef(id: number, el: HTMLVideoElement | null) {
|
||||||
@@ -459,6 +464,7 @@ onBeforeUnmount(() => {
|
|||||||
<section
|
<section
|
||||||
v-for="(item, idx) in filteredItems"
|
v-for="(item, idx) in filteredItems"
|
||||||
:key="`${tab}-${item.id}`"
|
:key="`${tab}-${item.id}`"
|
||||||
|
v-show="idx >= visibleRange.start && idx <= visibleRange.end"
|
||||||
class="slide"
|
class="slide"
|
||||||
:class="{ active: idx === activeIndex }"
|
:class="{ active: idx === activeIndex }"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user