blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(floatingPanel): lag caused by scrollbar and panel movement #12146 (#12161)

Browse Source 
* fix(floatingPanel): Lag caused by scrollbar and panel movement

* fix(floatingPanel): simplify scroll position determination
This commit is contained in:
dh 2023-08-13 08:24:50 +08:00 committed by GitHub
parent e2f041fe0a
commit 392da16c30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/vant/src/floating-panel/FloatingPanel.tsx
View File

@ -89,13 +89,15 @@ export default defineComponent({
return moveY; return moveY;
}; };
let startY: number; let startY: number,
maxScroll: number = -1;
const touch = useTouch(); const touch = useTouch();
const onTouchstart = (e: TouchEvent) => { const onTouchstart = (e: TouchEvent) => {
touch.start(e); touch.start(e);
dragging.value = true; dragging.value = true;
startY = -height.value; startY = -height.value;
maxScroll = -1;
}; };
const onTouchmove = (e: TouchEvent) => { const onTouchmove = (e: TouchEvent) => {
@ -103,14 +105,18 @@ export default defineComponent({
const target = e.target as Element; const target = e.target as Element;
if (contentRef.value === target || contentRef.value?.contains(target)) { if (contentRef.value === target || contentRef.value?.contains(target)) {
const { scrollTop } = contentRef.value;
// If maxScroll value more than zero, indicates that panel movement is not triggered from the top
maxScroll = Math.max(maxScroll, scrollTop);
if (!props.contentDraggable) return; if (!props.contentDraggable) return;
if (-startY < boundary.value.max) { if (-startY < boundary.value.max) {
if (e.cancelable) e.preventDefault(); if (e.cancelable) e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} else if ( } else if (!(scrollTop <= 0 && touch.deltaY.value > 0)) {
!(contentRef.value.scrollTop <= 0 && touch.deltaY.value > 0) return;
) { } else if (maxScroll > 0) {
return; return;
} }
} }
@ -120,6 +126,7 @@ export default defineComponent({
}; };
const onTouchend = () => { const onTouchend = () => {
maxScroll = -1;
dragging.value = false; dragging.value = false;
height.value = closest(anchors.value, height.value); height.value = closest(anchors.value, height.value);