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