WeChat 미니 프로그램에서 왼쪽 스와이프 삭제를 구현하는 방법에 대한 자세한 설명

왼쪽으로 스와이프하여 삭제 효과는 범용 애플리케이션 WeChat과 같은 앱 상호 작용 방법에서 매우 인기가 있습니다.

WeChat에서 왼쪽으로 스와이프하여 삭제

또 다른 예 생산성 앱 지우기

삭제하려면 왼쪽 슬라이드 지우기

기술적으로 이 효과를 얻는 것은 어렵지 않습니다. 응답 작업을 슬라이드하고, 구성 요소를 이동하고, 좌표 계산을 추가하고, 상태를 기록하면 됩니다. 미니 프로그램에서 이 효과를 얻는 방법을 소개하는 기사도 있지만 기본적으로 이 개발자들은 실제 컴퓨터에서 세부적으로 테스트하지 않았다고 확신합니다. 왜냐하면 내 연습을 통해 이 효과를 얻는 것이 거의 불가능하다는 것을 알았기 때문입니다. 미니프로그램에서 완벽한 효과를 발휘 불가능한 미션입니다.

이 모든 것은 애플릿의 이벤트 메커니즘에서 시작됩니다. 슬라이딩 작업의 경우 미니 프로그램에서는 이벤트에 응답하는 두 가지 방법인 bind과 catch을 제공합니다. 차이점은 이벤트 버블링을 방지할지 여부이지만 preventDefault 메서드를 제공하지 않으므로 이를 수행할 수 없습니다. 프로그램에서 동적으로 결정되는 이벤트를 방지합니다.

그럼 미니 프로그램의 또 다른 기능에 대해 이야기하겠습니다. 이 기능은 기본적으로 페이지에 대한 세로 스크롤 효과를 제공합니다. 코드도 있고, 미니 프로그램도 onPullDownRefresh, onReachBottom를 세심하게 제공해 줘서 뭐, 모든 게 완벽해요.

그런 다음 이러한 기능이 왼쪽 슬라이딩 효과를 만나면 당혹스러울 것입니다. 완벽한 왼쪽 스와이프 삭제 효과를 위해서는 가로 슬라이드로 판단될 때 사용자의 세로 방향 움직임을 무시해야 합니다(결국 사용자의 손가락이 위아래로 흔들리지 않을 것이라고 기대할 수는 없습니다). 그러나 preventDefault 메소드가 없기 때문에 슬라이딩 이벤트를 잡아야 하거나, 아니면 사용자의 손가락이 수평으로만 슬라이딩할 것으로 예상할 수 있습니다.

이런 이유로 제가 본 미니 프로그램 중에는 왼쪽으로 밀어서 삭제하는 작업이 거의 없었는데, 이런 효과를 주는 프로그램이 바로 Impression Micro Notes List

Impression Micro Notes List

왼쪽으로 스와이프하면 페이지가 위아래로 동시에 스크롤되는 것을 볼 수 있는데 이는 좋지 않습니다. 경험. (참고로 Impression Micro Notes 목록의 초기 버전은 이 효과를 얻기 위해 스크롤-view을 사용하며 경험은 더욱 악화됩니다.)

물론 슬라이딩 이벤트도 잡을 수 있지만, 이렇게 하면 수평 슬라이딩 및 수직 슬라이딩에 문제가 없습니다. 스와이프할 때에도 아무런 반응이 나타나지 않습니다.

이러한 문제를 발견했을 때 매우 좌절했지만, 문제의 핵심은 페이지가 세로로 스크롤되는 것을 동적으로 방지할 수 있다는 것입니다. 스크롤 뷰에는 보기 외에도 세로로 스크롤할 수 있는 기능도 있으며 scroll-y     Boolean    false     允许纵向滚动 속성도 있습니다. 네, 여러분도 생각해 보셨을 거라 생각합니다. 이 속성이 올바른 조건에서 동적으로 설정된다면 원하는 효과를 얻을 수 있을 것입니다.

구현 측면에서는 먼저 세로 스크롤을 비활성화한 다음 사용자가 세로로 동작한다고 판단한 후 활성화해야 합니다. 글쎄요. 그러나 touchmove 이벤트에서 이 속성을 활성화해도 수직 스크롤 효과가 활성화되지 않는다는 사실이 다시 한 번 직감했습니다.

그러면 반대로 세로 스크롤을 먼저 활성화하고 가로 동작을 결정한 후 이 속성을 비활성화합니다. 실제로 이 방법이 효과가 있다는 것이 입증되었지만 여전히 문제가 있습니다. 슬라이딩 방향을 결정하기 전에는 사용자가 수직 방향으로 움직일 가능성이 매우 작지만 사용자는 여전히 페이지가 위아래로 스크롤되는 것을 느낄 것입니다.

다음은 이 아이디어를 바탕으로 달성한 위챗 홈페이지 모방 효과입니다

왼쪽으로 스와이프하여 삭제

다음에 기사에서는 이 효과를 얻을 수 있는 또 다른 방법을 보여 드리겠습니다. 이 방법은 페이지의 수직 스크롤 문제를 완벽하게 제거하지만 여전히 다른 제한 사항이 있습니다.

위 내용은 WeChat 미니 프로그램에서 왼쪽 스와이프 삭제를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!