修复拖动时错位问题

This commit is contained in:
icssoa
2025-11-12 10:38:25 +08:00
parent 97722fe22f
commit a7e87906b7

View File

@@ -1,9 +1,6 @@
<template> <template>
<view <view
class="cl-float-view" class="cl-float-view"
:class="{
'no-dragging': !position.isDragging
}"
:style="viewStyle" :style="viewStyle"
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchmove.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
@@ -16,7 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { getSafeAreaHeight, getTabBarHeight, hasCustomTabBar, router } from "@/cool"; import { getSafeAreaHeight, getTabBarHeight, hasCustomTabBar, router } from "@/cool";
import { computed, reactive } from "vue"; import { computed, nextTick, reactive } from "vue";
import { clFooterOffset } from "../cl-footer/offset"; import { clFooterOffset } from "../cl-footer/offset";
defineOptions({ defineOptions({
@@ -80,7 +77,7 @@ type Position = {
const position = reactive<Position>({ const position = reactive<Position>({
x: props.left, // 初始左边距10px x: props.left, // 初始左边距10px
y: props.bottom, // 初始距离底部10px y: props.bottom, // 初始距离底部10px
isDragging: false // 初始状态为拖拽 isDragging: true // 初始状态为拖拽
}); });
/** /**
@@ -129,6 +126,14 @@ const viewStyle = computed(() => {
// 设置高度 // 设置高度
style["height"] = `${props.size}px`; style["height"] = `${props.size}px`;
// 拖拽过渡效果
if (position.isDragging) {
style["transition-property"] = "none";
} else {
style["transition-property"] = "left, bottom";
style["transition-duration"] = "300ms";
}
return style; return style;
}); });
@@ -265,23 +270,20 @@ function onTouchEnd() {
// 如果不在拖拽状态,直接返回 // 如果不在拖拽状态,直接返回
if (!position.isDragging) return; if (!position.isDragging) return;
// 结束拖拽状态,恢复过渡动画 nextTick(() => {
position.isDragging = false; // 结束拖拽状态,恢复过渡动画
position.isDragging = false;
// 执行边缘吸附逻辑 // 执行边缘吸附逻辑
if (!props.noSnapping) { if (!props.noSnapping) {
performEdgeSnapping(); performEdgeSnapping();
} }
});
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.cl-float-view { .cl-float-view {
@apply fixed transition-none; @apply fixed;
&.no-dragging {
@apply duration-300;
transition-property: left, bottom;
}
} }
</style> </style>