-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
1,223 additions
and
3,974 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,4 +13,5 @@ desktop.ini # Windows | |
| logs/ | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| yarn-error.log* | ||
| myenv | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| declare module "vue" { | ||
| export interface GlobalComponents { | ||
| STable: typeof import("@surely-vue/table")["STable"]; | ||
| STableColumn: typeof import("@surely-vue/table")["STableColumn"]; | ||
| STableColumnGroup: typeof import("@surely-vue/table")["STableColumnGroup"]; | ||
| STableSummary: typeof import("@surely-vue/table")["STableSummary"]; | ||
| STableSummaryRow: typeof import("@surely-vue/table")["STableSummaryRow"]; | ||
| STableSummaryCell: typeof import("@surely-vue/table")["STableSummaryCell"]; | ||
| } | ||
| } | ||
| export {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,87 @@ | ||
| <!-- src/components/DynamicHeightList.vue --> | ||
| <template> | ||
| <h1>Detail Page</h1> | ||
| <div | ||
| ref="containerRef" | ||
| class="flex-1 overflow-y-auto box-border relative" | ||
| @scroll="handleScroll" | ||
| > | ||
| <div :style="{ height: totalHeight + 'px' }"></div> | ||
| <ul | ||
| class="absolute top-0 left-0" | ||
| :style="{ | ||
| transform: `translateY(${offsetY}px)`, | ||
| }" | ||
| > | ||
| <li | ||
| v-for="item in visibleItems" | ||
| :key="item.id" | ||
| class="text-gray-700 bg-gray-50 border-y-[1px]" | ||
| :style="{ height: item.height + 'px' }" | ||
| > | ||
| {{ item.text }} | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref, computed, onMounted, onUnmounted } from "vue"; | ||
|
|
||
| const total = ref(100); | ||
| const containerRef = ref(null); | ||
| const items = ref([]); | ||
| const startIndex = ref(0); | ||
| const offsetY = ref(0); | ||
|
|
||
| function generateDynamicHeightData(count) { | ||
| return Array.from({ length: count }, (_, i) => ({ | ||
| id: i, | ||
| text: `Item ${i + 1}`, | ||
| height: 50 + Math.floor(Math.random() * 100), // 动态高度在 50 到 150px 之间 | ||
| })); | ||
| } | ||
|
|
||
| const totalHeight = computed(() => { | ||
| return items.value.reduce((sum, item) => sum + item.height, 0); | ||
| }); | ||
|
|
||
| const visibleItems = computed(() => { | ||
| return items.value.slice(startIndex.value, startIndex.value + 20); | ||
| }); | ||
|
|
||
| function updateVisibleItems() { | ||
| if (!containerRef.value) return; | ||
|
|
||
| const scrollTop = containerRef.value.scrollTop; | ||
|
|
||
| let currentHeight = 0; | ||
| let start = 0; | ||
|
|
||
| for (let i = 0; i < items.value.length; i++) { | ||
| if (currentHeight >= scrollTop && start === 0) { | ||
| start = i; | ||
| } | ||
| currentHeight += items.value[i].height; | ||
| } | ||
|
|
||
| startIndex.value = Math.max(0, start - 5); // 预加载5个项 | ||
|
|
||
| offsetY.value = items.value | ||
| .slice(0, startIndex.value) | ||
| .reduce((sum, item) => sum + item.height, 0); | ||
| } | ||
|
|
||
| function handleScroll() { | ||
| updateVisibleItems(); | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| items.value = generateDynamicHeightData(total.value); | ||
| updateVisibleItems(); | ||
| window.addEventListener("resize", updateVisibleItems); | ||
| }); | ||
|
|
||
| onUnmounted(() => { | ||
| window.removeEventListener("resize", updateVisibleItems); | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,80 @@ | ||
| <template> | ||
| <h1>List Page</h1> | ||
| <div | ||
| ref="containerRef" | ||
| class="flex-1 overflow-y-auto box-border relative" | ||
| @scroll="handleScroll" | ||
| > | ||
| <div :style="{ height: totalHeight + 'px' }"></div> | ||
| <ul | ||
| class="absolute top-0 left-0" | ||
| :style="{ | ||
| transform: `translateY(${offsetY}px)`, // 设置偏移量 | ||
| }" | ||
| > | ||
| <li | ||
| v-for="item in visibleItems" | ||
| :key="item.id" | ||
| class="border-y-[1px] text-gray-700 h-[50px]" | ||
| > | ||
| {{ item.text }} | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref, onMounted, computed } from "vue"; | ||
| const items = ref([]); | ||
| const total = ref(200); // 总条目数，调大测试是否能正常渲染到底部 | ||
| const itemHeight = 50; // 每个条目的高度 | ||
| const containerRef = ref(); | ||
| const containerHeight = computed(() => containerRef.value?.clientHeight || 0); // 容器固定高度 | ||
| const visibleCount = computed(() => | ||
| Math.ceil(containerHeight.value / itemHeight) | ||
| ); // 可见条目数量 | ||
| // 总内容高度，确保滚动的区域正确覆盖所有内容 | ||
| const totalHeight = computed(() => total.value * itemHeight); | ||
| // 记录起始索引和偏移量 | ||
| const startIndex = ref(0); | ||
| const offsetY = ref(0); // 实际偏移量，用于控制 translateY | ||
| // 增加缓冲区，确保上下滚动有足够的渲染项 | ||
| const bufferSize = 10; | ||
| const visibleItems = computed(() => { | ||
| if (!visibleCount.value) return []; | ||
| const start = Math.max(0, startIndex.value - bufferSize); | ||
| const end = Math.min( | ||
| startIndex.value + visibleCount.value + bufferSize, | ||
| total.value | ||
| ); | ||
| return items.value.slice(start, end); | ||
| }); | ||
| function handleScroll(event) { | ||
| // 获取真实的 scrollTop 值 | ||
| const scrollTop = event.target.scrollTop; | ||
| // 根据 scrollTop 计算起始索引 | ||
| startIndex.value = Math.floor(scrollTop / itemHeight); | ||
| // 计算偏移量 offsetY，用于 translateY | ||
| offsetY.value = startIndex.value * itemHeight; | ||
| } | ||
| function generateFixedHeightData(count) { | ||
| return Array.from({ length: count }, (_, i) => ({ | ||
| id: i, | ||
| text: `Item ${i + 1}`, | ||
| })); | ||
| } | ||
| onMounted(() => { | ||
| items.value = generateFixedHeightData(total.value); | ||
| }); | ||
| </script> | ||
| <style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.