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

🤔 fix(list): 优化滚动体验

Browse Source
This commit is contained in:
BTMuli
2023-04-26 22:52:37 +08:00
parent 3c6587cb73
commit ec55ff69d6
1 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/Achievements.vue
View File

@@ -140,10 +140,10 @@ const renderAchievement = computed(() => {
// virtual list // virtual list
const start = ref(0 as number); const start = ref(0 as number);
const itemCount = computed(() => { const itemCount = computed(() => {
return Math.ceil((window.innerHeight - 100) / 75); return Math.ceil((window.innerHeight - 100) / 76);
}); });
const emptyHeight = computed(() => { const emptyHeight = computed(() => {
return selectedAchievement.value.length * 75 + 40; return selectedAchievement.value.length * 76;
}); });
const translateY = ref("0px" as string); const translateY = ref("0px" as string);
// render // render
@@ -168,21 +168,37 @@ onMounted(async () => {
}); });
function handleScroll (e: Event) { function handleScroll (e: Event) {
// 如果 scrollTop 到底部了
if ((e.target as HTMLElement).scrollTop + (e.target as HTMLElement).offsetHeight >= (e.target as HTMLElement).scrollHeight) {
// 如果 selectedAchievement 的长度小于 itemCount，不进行偏移
if (selectedAchievement.value.length <= itemCount.value) {
window.requestAnimationFrame(() => {
start.value = 0;
translateY.value = "0px";
});
return;
}
window.requestAnimationFrame(() => {
start.value = selectedAchievement.value.length - itemCount.value;
translateY.value = `${(selectedAchievement.value.length - itemCount.value) * 76}px`;
});
return;
}
if (selectedSeries.value !== 0 && selectedSeries.value !== 17 && selectedSeries.value !== -1) { if (selectedSeries.value !== 0 && selectedSeries.value !== 17 && selectedSeries.value !== -1) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
const { scrollTop } = e.target as HTMLElement; const { scrollTop } = e.target as HTMLElement;
if (scrollTop < 76.8) { if (scrollTop < 86.8) {
start.value = 0; start.value = 0;
translateY.value = "0px"; translateY.value = "0px";
} else { } else {
start.value = Math.floor((scrollTop - 76.8) / 75); start.value = Math.floor((scrollTop - 86.8) / 76);
translateY.value = `${scrollTop - 76.8}px`; translateY.value = `${scrollTop - 86.8}px`;
} }
}); });
} else { } else {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
const { scrollTop } = e.target as HTMLElement; const { scrollTop } = e.target as HTMLElement;
start.value = Math.floor(scrollTop / 75); start.value = Math.floor(scrollTop / 76);
translateY.value = `${scrollTop}px`; translateY.value = `${scrollTop}px`;
}); });
} }