kerms
/
wireless-esp32-tools-web-host
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(UX) auto scroll not working when refresh filteredData

This commit is contained in:
kerms 2024-06-15 16:40:38 +08:00
parent 99b84b416d
commit 418a31ce6d
1 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/text-data-viewer/textDataViewer.vue
View File

@ -291,6 +291,10 @@ function attachScroll() {
const config = {childList: true, subtree: true, attributes: true}; const config = {childList: true, subtree: true, attributes: true};
mutationObserver.observe(vuetifyVirtualScrollBarRef.value, config) mutationObserver.observe(vuetifyVirtualScrollBarRef.value, config)
} }
if (store.forceToBottom) {
scrollToBottom();
}
} }
onMounted(() => { onMounted(() => {
@ -343,13 +347,6 @@ function scrollToBottom() {
}); });
} }
function scrollToTop() {
nextTick(() => {
vuetifyVirtualScrollBarRef.value.scrollTop = vuetifyVirtualScrollBarRef.value.scrollHeight;
// vuetifyVirtualScrollBarRef.value.scrollTo(0, 0);
});
}
function formatHexInput(input: string) { function formatHexInput(input: string) {
// Split the input string on spaces to process each segment separately // Split the input string on spaces to process each segment separately
let str; let str;
@ -423,11 +420,10 @@ watch(loopSendFreq, (value) => {
/* patch scroll container does not update clear filter */ /* patch scroll container does not update clear filter */
watch(() => store.filterChanged, (value) => { watch(() => store.filterChanged, (value) => {
if (value) { if (value && store.forceToBottom) {
scrollToTop()
scrollToBottom(); scrollToBottom();
store.filterChanged = false;
} }
store.filterChanged = false;
}) })
watch(() => store.RxRemainHexdump, value => { watch(() => store.RxRemainHexdump, value => {
@ -446,6 +442,8 @@ const handleScroll = (ev: Event) => {
if (store.forceToBottom) { if (store.forceToBottom) {
if (vuetifyVirtualScrollBarRef.value.scrollTop - lastScrollHeight < 0) { if (vuetifyVirtualScrollBarRef.value.scrollTop - lastScrollHeight < 0) {
store.forceToBottom = false; store.forceToBottom = false;
} else {
scrollToBottom();
} }
} else if ((vuetifyVirtualScrollBarRef.value.scrollHeight - } else if ((vuetifyVirtualScrollBarRef.value.scrollHeight -
vuetifyVirtualScrollBarRef.value.scrollTop) <= vuetifyVirtualScrollBarRef.value.clientHeight) { vuetifyVirtualScrollBarRef.value.scrollTop) <= vuetifyVirtualScrollBarRef.value.clientHeight) {