How to implement simple WeChat right-swipe deletion logic in Vue3

1. Build a simple page

The corresponding code, the interface uses tailwindCSS, the code is very simple, it is ordinary positioning, the key The positioning is outlined in yellow. The value of right is the width of divdelete. Other styles will not be described in detail here.

2. Preconditions

Let’s sort out the ideas first.

First of all, we need to label the Delete button component with ref, because we will need to use the instance of this div later. (wrapperref is just to optimize the code, we don’t need it for the time being) Here we need to use the TouchEvent event, we test it in the browser developer tools , you need to adjust the adaptive mode to the mobile phone to see the effect.

We bind the two native events @touchstart and @touchend to and friends On this div. Don't be confused here, these two events are the same as the @click event, they are js native events. It is not our own custom event. When it is detected that the user presses = on the screen, $event will be automatically passed to the relative function parameter.

3. Design touchstart function

Before that, I would like to explain my NOTE: Why should we consider the situation where the user only uses one finger?

First let us print what properties the event event object passed over has.

The most critical attribute here is this changedTouches attribute, its value is an array. Let’s first look at how MDN explains this attribute.

A bit abstract, right? Let me explain what this nonsense actually means.
First we need to understand why this property is an array. When our fingers touch the screen, the browser will capture how many fingers you have touched the screen at this time. We can make some different judgments based on this value. The simplest example is, assuming that the array changedTouches.length is 1, it means that I only touched the screen with one finger, then I can judge when designing the function

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

and I will You can perform corresponding finger operations based on how many fingers the user touches. Anyone who has used a touchpad knows that two fingers, single finger, three fingers, etc. all correspond to different events. In fact, you can understand why this property is designed as an array.

Here we only consider the situation where the user touches the screen and slides with only one finger.

Corresponding to the code below, we have obtained the point when the user first touches the screen. Here we need to look at what attributes this touchPoint has.

#The most critical attribute of this object is the one circled.

Additional skills supplement clientX and clientY

Let’s first look at how MDN explains it.

Here we need to focus on understanding this sentence, Be sure to understand this-->regardless of whether the page scrolls horizontally (vertical scrolling corresponds to clientY)

Here we use pictures to talk. The point with the red arrow here represents the coordinates of the point we get when the user touches it , and the distance pointed by the yellow arrow is clientX .

And clientYNeedless to say, it’s just this distance

tips: The distance here is relative to the coordinates of the upper left corner (0, 0), which is the default rule during design

pageX and pageY

Although we don’t use these two currently, we will expand on them here. Let’s look at MDN’s explanation first.

Here we still focus on understanding the two words scrolling. Because this is the most core difference from clientX.

Since I cannot display this page, I intercepted a page from MDN as an example.

This is the initial interface. It can be seen here that our pageX and pageY are the same as our clientX and clienY are exactly the same, because the starting point is the upper left corner of the page, and the page has not yet scrolled.

But once we scroll down a certain distance, let's say we scroll down 200px.

At this time, the starting point of our pageY is still the starting point of our previous page, not just the distance of the red line above! That is to say, the actual pageY is equal to the red line distance of 200px (because we have not offset to the X axis, pageX is still the original value).

If you understand clientY, you can actually know that at this time pageY=clientY 200px

screenX and screenY

These two properties are basically not used in daily development. Here is a brief introduction.

The diagram represents it as follows.

When my screen gets bigger:

ok, we already know the relevant pre-knowledge. Here you can get the value of clientX when the user clicks as a mark.

4. Design the touchend function

First put the total code, and then We explain it step by step.

First we need to get the specific div touched by the user. Because in the end it's what's going to slide.

Then, just like the touchStart event, when the user touches and releases, an array data changedTouches will also be recorded.

It’s easy to understand, touchStartX-touchEndX you can figure out how far the user has slid ?

We need a threshold here, which is used to see if the user really wants to slide to the left with this touch and bring up the delete button for operation? In human terms, maybe the user just tapped the screen?

So here we need to simply judge whether the distance the user moved is greater than the threshold we specified. If it is greater, then it is judged that the user has performed this operation. If not, the sliding event is ignored.

Make judgments and perform operations

#The above is just to directly operate the dom to achieve the function, we can be more elegant To solve this mobile problem, readers need to bring their own thinking to achieve it.

5. Add excessive animation

Successfully realized~

##Thinking questions:

My

delBtnInitMoveDistance means the distance that the delete button initially moved. Can you tell me what the calculated value is? Why can code be optimized?

The above is the detailed content of How to implement simple WeChat right-swipe deletion logic in Vue3. For more information, please follow other related articles on the PHP Chinese website!