>  기사  >  웹 프론트엔드  >  Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

WBOY
WBOY앞으로
2023-05-27 17:35:041844검색

1. 간단한 페이지 만들기

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

해당 코드, 인터페이스는 tailwindCSS를 사용하고 코드는 매우 간단하며 일반적인 위치 지정이며 키 위치는 노란색 프레임으로 표시되어 있습니다. right 값은 divdelete의 너비입니다. 다른 스타일은 여기에서 자세히 설명하지 않습니다. tailwindCSS,代码非常简单,就是普通的定位,关键的定位已经用黄色框框圈出。right的值为div删除的宽度,其它的样式这里不再过多赘述。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

二.前置条件

这里先来梳理一下思路。

首先,我们需要给这删除按钮组件打上ref,因为之后我们需要用到这个div的实例。(wrapperref是只是为了优化代码,我们暂时不需要)这里我们需要用到TouchEvent这个事件,我们在浏览器开发者工具测试时,需要调节自适应到手机的模式才可以看到效果。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

我们把@touchstart@touchend这两个原生事件绑定到和朋友这个div身上。这里不要迷惑,这两个事件和@click事件一样,是js原生的事件。并不是我们自己自定义的事件,当检测到用户在屏幕上按下=时,会自动传递$event到相对于的函数参数中。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

三.设计touchstart函数

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

在此之前,我想解释一下我的NOTE:为什么要写考虑用户只用了一根手指的情况呢?

首先让我们打印一下传递过来的event事件对象有哪些属性。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

在这里最关键的属性就是这个changedTouches这个属性,它的值是一个数组。先来看MDN是怎么解释这个属性的。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

有点抽象是吧?我来解释一下这鬼话到底想表达什么意思。
首先我们需要理解这个属性为什么是一个数组。当我们的手指去接触屏幕的时候,浏览器会捕获你这一时间一共几根指头接触到了屏幕。我们可以根据这个值去做一些不同的判断。最简单例子就是,假设这个数组changedTouches.length为1,那么说明我只用了一根手指触摸屏幕,那么我设计函数的时候就可以判断

if(changedTouches.length>0 && changedTOuches.length<2)
{
TODO...
}

我就可以根据用户触摸了几根手指去做相应的几指操作,用过触控板的都知道双指单指三指等都对应不同的事件。其实你可以就这样理解这个属性为什么要设计为一个数组。

在这里我们只考虑用户只用了一根手指触摸屏幕滑动的情况。

对应下面的代码,我们已经获取了用户刚开始触摸屏幕时,这个点,在这里我们需要看一下这个touchPoint身上哪些属性。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

这个对象身上最为关键的属性就是圈出来的这个。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

额外技能补充 clientXclientY

先来看一下MDN怎么解释的。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

这里我们需要重点理解这句话,注意一定要理解这个--〉无论页面是否水平滚动(垂直滚动对应着clientY)

在这里我们用图说话,这里红色箭头的点表示用户触摸时,我们获取到的那个点坐标,黄色箭头指向的那段距离,就是clientX

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

clientY

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법II. 전제조건

🎜먼저 아이디어를 정리해보자. 🎜🎜먼저 이 삭제 버튼 구성 요소에 ref를 추가해야 합니다. 나중에 이 div 인스턴스를 사용해야 하기 때문입니다. (wrapperref는 단지 코드 최적화를 위한 것이므로 당분간은 필요하지 않습니다.) 여기서는 TouchEvent를 사용해야 합니다. > 브라우저에서 개발하는 이벤트 도구를 테스트할 때 효과를 보려면 휴대폰에 적응 모드를 조정해야 합니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜두 개의 기본 이벤트인 @touchstart@touchendwith friends div에 바인딩되어 있습니다. 여기서 혼동하지 마세요. 이 두 이벤트는 js의 기본 이벤트인 @click 이벤트와 동일합니다. 사용자가 화면에서 =를 누르는 것이 감지되면 $event가 자동으로 관련 함수 매개변수에 전달됩니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜3. 터치스타트 기능 디자인 🎜🎜간단한 WeChat 오른쪽 스와이프 삭제 로직 구현 방법 in Vue3🎜 🎜그 전에 사용자가 한 손가락만 사용하는 상황을 고려하여 NOTE:를 작성해야 하는 이유를 설명하고 싶습니다. 🎜🎜먼저 전달된 event 이벤트 개체의 속성을 인쇄해 보겠습니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜여기서 가장 중요한 속성은 값이 배열인 changedTouches 속성입니다. 먼저 MDN이 이 속성을 어떻게 설명하는지 살펴보겠습니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜좀 추상적이죠? 이 말도 안되는 말이 실제로 무엇을 의미하는지 설명하겠습니다.
먼저 이 속성이 배열인 이유를 이해해야 합니다. 손가락이 화면을 터치하면 브라우저는 이때 화면을 터치한 손가락 수를 캡처합니다. 우리는 이 값을 기반으로 몇 가지 다른 판단을 내릴 수 있습니다. 가장 간단한 예는 changedTouches.length 배열이 1이라고 가정하면 한 손가락으로만 화면을 터치했다는 의미입니다. 그러면 함수를 설계할 때 🎜rrreee🎜에 따라 판단할 수 있습니다. 사용자는 여러 손가락을 터치하여 해당 작업을 수행합니다. 트랙패드를 사용해 본 사람이라면 두 손가락, 한 손가락, 세 손가락 등이 서로 다른 이벤트에 해당한다는 것을 알고 있습니다. 실제로 이 속성을 배열로 설계한 이유를 이해할 수 있습니다. 🎜🎜여기에서는 사용자가 한 손가락만으로 화면을 터치하고 슬라이드하는 상황만 고려합니다. 🎜🎜아래 코드에 대응하여 사용자가 화면을 처음 터치하는 지점을 얻었습니다. 여기서는 이 touchPoint의 속성을 살펴봐야 합니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜이 물체 신체의 가장 중요한 속성은 동그라미로 표시된 것입니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜추가 기술 보충 clientXclientY🎜🎜먼저 MDN이 어떻게 설명하는지 살펴보겠습니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜여기 있습니다. 이 문장을 이해하는 데 집중해야 합니다. --> 페이지가 가로로 스크롤되는지 여부에 관계없이(세로 스크롤은 clientY에 해당함)🎜🎜여기서 사용합니다. 여기서 빨간색 화살표 점은 사용자가 터치하면 획득하는 점 좌표를 나타내고 노란색 화살표가 가리키는 거리는 clientX입니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜그리고clientY말할 필요도 없이 딱 이 정도 거리🎜🎜🎜🎜

팁: 여기서 거리는 왼쪽 위 모서리 좌표(0, 0)를 기준으로 하며 이는 디자인 중 기본 규칙입니다

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

pageXpageY<code>pageXpageY

这两个虽然我们目前用不到,但是在这里拓展着说一下。还是先看MDN的解释。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

这里还是重点注意理解滚动这两个字。因为这是和clientX最为核心的不同。

由于我自己这个页面展示不出来,所以我截取了MDN的一个页面作为例子。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

这是最开始的界面,这里可以看出来,我们的pageXpageY是和我们的clientXclienY一摸一样的,因为起点都是页面的左上角,页面还未发生滚动。

但是一旦我们向下滚动了一段距离,假设我们向下滚动了200px

这时候我们的pageY的起点仍是我们之前页面的起点,而不仅仅是上面的红线距离了!也就是实际的pageY就等于红线距离+200px(因为我们没有向X轴偏移,pageX则还是原来的值)。

如果你看懂了clientY,其实你也能知道,此时pageY=clientY+200px

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

screenXscreenY

这两个属性在日常开发基本上不会用到,在这里简单做一下介绍。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

用图来表示就是如下。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

当我屏幕变大时:

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

ok,相关的前置知识我们已经了解。在这里就可以拿到用户点击时的clientX的值,作为标记。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

四.设计touchend函数

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

先放总代码,然后我们一步一步讲解。

首先我们要获取到用户触摸的具体div。因为最终也是它要滑动的。

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

然后和touchStart事件一样,当用户触摸松手的时候,也会记录一个数组数据changedTouches

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

很简单就可以明白,touchStartX-touchEndX

현재는 이 두 가지를 사용하지 않지만 여기서는 이를 확장하겠습니다. 먼저 MDN의 설명을 살펴보겠습니다.

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법

여기 스크롤 두 단어를 이해하는 데 특히 주의하세요. 이것이 clientX와의 핵심 차이점이기 때문입니다.

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법자체 페이지를 표시할 수 없기 때문에 MDN 페이지의 스크린샷을 예시로 가져왔습니다.

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법

여기에서 볼 수 있듯이 초기 인터페이스는 pageXpageYclientXclienY 시작점이 페이지의 왼쪽 상단이고 페이지가 아직 스크롤되지 않았기 때문에 완전히 동일합니다. <img src="https://img.php.cn/upload/article/000/887/227/168518011118986.png" alt="Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법">

하지만 특정 거리만큼 아래로 스크롤하면 200px 아래로 스크롤한다고 가정해 보겠습니다.

이때 우리 pageY의 시작점은 위의 빨간색 선의 거리뿐만 아니라 여전히 이전 페이지의 시작점입니다! 즉, 실제 pageY빨간색 선 거리 + 200px와 같습니다(X축에 대한 오프셋이 없기 때문에 pageX는 여전히 원래 값입니다).

clientY를 이해하시면 실제로는 이때 pageY=clientY+200px라는 것을 아실 수 있습니다

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법 Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법

🎜screenX 및 screenY🎜🎜 이 두 속성은 기본적으로 일상적인 개발에서는 사용되지 않습니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜사진 활용 표현은 다음과 같습니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜내가 화면이 커졌을 때: 🎜🎜간단한 위챗 구현 방법 바로바로 -Vue3의 스와이프 삭제 로직🎜🎜좋아, 우리는 이미 관련 사전 지식을 알고 있습니다. 여기에서 사용자가 표시로 클릭하면 clientX 값을 얻을 수 있습니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜🎜🎜 4. 터치엔드 기능 설계🎜 🎜🎜🎜요약 첫 번째 코드를 넣은 다음 단계별로 설명하겠습니다. 🎜🎜먼저 사용자가 터치한 특정 div를 가져와야 합니다. 결국에는 미끄러질 것이기 때문이다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜그런 다음 touchStart 이벤트와 마찬가지로 사용자가 터치했다가 떼면 배열 데이터 changedTouches도 기록됩니다. 🎜🎜Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 논리를 구현하는 방법🎜 🎜🎜🎜 이해하기 매우 간단합니다. touchStartX-touchEndX 사용자가 얼마나 멀리 미끄러졌는지 알 수는 없나요? 🎜🎜여기에는 사용자가 실제로 이 터치로 왼쪽으로 슬라이드하고 작업을 위해 삭제 버튼을 불러오고 싶은지 확인하는 데 사용되는 임계값이 필요합니다. 인간의 관점에서 보면 사용자가 방금 화면을 탭한 것일까요? 🎜🎜여기서는 사용자가 이동한 거리가 우리가 지정한 임계값보다 큰지 여부를 간단히 판단해야 합니다. 이 값이 크면 사용자가 이 작업을 수행한 것으로 판단됩니다. 그렇지 않으면 슬라이딩 이벤트가 무시됩니다. 🎜🎜🎜🎜🎜 판단하고 운영하기 🎜🎜🎜🎜🎜 위의 내용은 돔을 직접 운영하여 기능을 구현하는 것 뿐입니다. 이 모바일 문제를 보다 우아하게 해결할 수 있으며, 이를 구현하려면 독자가 자신의 생각을 가져와야 합니다. 🎜🎜5. 과도한 애니메이션 추가🎜🎜🎜🎜

성공적으로 구현되었습니다~

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

생각하는 질문:

Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법

My delBtnInitMoveDistance의 의미는 삭제 버튼이 처음 이동한 거리입니다. 코드를 최적화할 수 있는 이유는 무엇입니까?

위 내용은 Vue3에서 간단한 WeChat 오른쪽 스와이프 삭제 로직을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 yisu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제