NetsPro/Reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

улучшение логики свайпа карточки

Browse Source
This commit is contained in:
Professional 2025-05-23 17:42:27 +07:00
parent d119467f5b
commit 19594a52ad
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/SwipeView.vue
View File

@ -323,12 +323,18 @@ const moveTouch = (event) => {
const currentX = event.touches[0].clientX;
const currentY = event.touches[0].clientY;
// Сохраняем текущую позицию для использования в endTouch
touchEndX.value = currentX;
touchEndY.value = currentY;
const diffX = currentX - touchStartX.value;
const diffY = currentY - touchStartY.value;
// Определяем направление свайпа
if (Math.abs(diffX) > Math.abs(diffY) * 2) {
// Горизонтальное движение
// Применяем точное смещение к карточке, чтобы она следовала за пальцем
// Нет дополнительных коэффициентов, карточка перемещается точно на то же расстояние, что и палец
if (Math.abs(diffX) > Math.abs(diffY)) {
// Определяем направление свайпа для индикаторов
if (diffX > 20) {
swipeDirection.value = 'right';
} else if (diffX < -20) {
@ -337,11 +343,12 @@ const moveTouch = (event) => {
swipeDirection.value = null;
}
// Применяем трансформацию к карточке
const rotate = diffX * 0.1; // Коэффициент поворота
const translateX = diffX * 1.2; // Коэффициент смещения
// Применяем небольшой поворот для естественности, но меньший чем был
// 0.05 вместо 0.1, чтобы эффект был легче
const rotate = diffX * 0.05;
cardStyle.value = {
transform: `translateX(${translateX}px) rotate(${rotate}deg)`,
transform: `translateX(${diffX}px) rotate(${rotate}deg)`,
transition: 'none'
};
@ -398,8 +405,8 @@ const moveDrag = (event) => {
y: event.clientY - dragStartY.value
};
// Определяем направление свайпа
if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y) * 2) {
// Определяем направление свайпа для индикаторов
if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y)) {
if (dragOffset.value.x > 20) {
swipeDirection.value = 'right';
} else if (dragOffset.value.x < -20) {
@ -408,8 +415,10 @@ const moveDrag = (event) => {
swipeDirection.value = null;
}
// Применяем трансформацию
const rotate = dragOffset.value.x * 0.1;
// Применяем небольшой поворот для естественности (уменьшен)
const rotate = dragOffset.value.x * 0.05;
// Карточка следует точно за курсором, без дополнительных коэффициентов
cardStyle.value = {
transform: `translateX(${dragOffset.value.x}px) rotate(${rotate}deg)`,
transition: 'none'
@ -422,13 +431,13 @@ const moveDrag = (event) => {
const endDrag = () => {
if (!isDragging.value) return;
// Сбрасываем стили
// Сбрасываем стили карточки и плавно возвращаем её в исходное положение
cardStyle.value = {
transform: 'none',
transition: 'transform 0.3s ease'
};
// Если перетаскивание было достаточно большим, выполняем действие
// Если перетаскивание было достаточно большим, выполняем действие лайка/пропуска
if (Math.abs(dragOffset.value.x) > swipeThreshold) {
if (dragOffset.value.x > 0) {
handleLike();
@ -436,6 +445,7 @@ const endDrag = () => {
handlePass();
}
} else {
// Если перетаскивание небольшое, просто сбрасываем направление
swipeDirection.value = null;
}