A deeper explanation of how to implement left-swipe deletion in WeChat mini-programs

The left-swipe to delete effect is very popular in app interaction methods, such as the universal application of WeChat

WeChat left-swipe to delete

Another example The efficiency app Clear

Clear slides left to delete

Technically speaking, it is not difficult to achieve this effect. The response Just slide the operation, move the component, add some coordinate calculations, and record the status. There are also some articles that introduce how to achieve this effect on mini programs, but I can basically confirm that these developers have not tested in detail on real machines, because through my practice, I have found that it is almost impossible to achieve this effect perfectly on mini programs It’s an impossible mission.

This all starts with the event mechanism of the applet. For sliding operations, the applet provides two ways to respond to events, bind and catch. The difference lies in whether to prevent the event from bubbling, but it does not provide preventDefault. Method, that is to say, it is impossible to dynamically determine whether to prevent an event from bubbling in the program.

Then let’s talk about another feature of the mini program. This feature is only valid on real machines. That is, the framework provides a vertical scrolling effect for the page by default. There is no need to write a line of code, and the mini program also thoughtfully provides Got onPullDownRefresh and onReachBottom, well, everything is perfect.

Then when these features encounter the left sliding effect, it will be embarrassing. For a perfect left-swipe deletion effect, when it is determined to be a horizontal slide, the user's movement in the vertical direction should be ignored (after all, you can't expect the user's finger to not shake up and down). However, because there is no preventDefault method, either the sliding event is caught, or you can only expect the user's finger to slide strictly horizontally.

Due to the above reasons, in the small programs I have seen, there are almost no left-swipe delete operations. It is almost because there is indeed one that achieves this effect, Impression Micro Note List

Impression micro-note list

You can see that the page will scroll up and down at the same time when you swipe left, which is not a good experience. (By the way, the early version of the Impression Micro Notes list uses scroll-view to achieve this effect, and the experience is even worse)

Of course, you can also catch the sliding event, but when sliding horizontally like this No problem, you won’t see any reaction when swiping vertically.

I was very frustrated when I discovered these problems, but I think the core of the problem is to be able to dynamically prevent the page from scrolling vertically. In addition to view, scroll-view also has the ability to scroll vertically, and there is also an attribute scroll-y Boolean false that allows vertical scrolling. Yes, I think you have also thought of it. As long as this property is dynamically set under the right conditions, the desired effect should be achieved.

From an implementation point of view, vertical scrolling should be disabled first, and then activated after determining that the user operates vertically. Well, perfect. But the fact hit me in the face again, activating this property in the touchmove event does not activate the vertical scrolling effect.

The other way around is to activate vertical scrolling first and disable this attribute after determining the horizontal operation. Well, practice has proven that this method works, but there are still problems. Before we determine the sliding direction, the user is likely to move in the vertical direction. Although it is very small, the user will still feel the page scrolling up and down.

The following is the imitation WeChat homepage effect I achieved based on this idea

Swipe left to delete

In subsequent articles , I will show you another way to achieve this effect, which perfectly eliminates the vertical scrolling problem of the page, but still has other limitations.

The above is the detailed content of A deeper explanation of how to implement left-swipe deletion in WeChat mini-programs. For more information, please follow other related articles on the PHP Chinese website!