JS implements the function of sliding left on the mobile terminal to display the delete button

When I was working on a mobile project recently, I needed to implement a corresponding delete button when each item on a list page is slid to the left. In fact, it is very simple to implement this function. This article mainly introduces how to realize the delete button when sliding to the left on the mobile terminal based on js. Friends who need it can refer to

Recently when working on a mobile terminal project, it is necessary to realize that each item of a list page moves to the left. The corresponding delete button appears when sliding. I originally thought of using zepto's touch.js plug-in directly, because I had used this plug-in before to achieve the same function. It was quite easy to use at the time. Just use its swipeLeft and swipeRight methods. But when I started to use this function again today, I found that these two methods had no effect when used, and there was no response at all. I checked the information online and downloaded the latest versions of zepto and touch.js, but it didn't work. I don't know why? So this plugin was abandoned.

The following is the code I later implemented. In fact, it uses the touch event of native js, and then combines the coordinates of the touch point to determine the left and right swipes,

 

  
侧滑显示删除按钮1删除
  
侧滑显示删除按钮2删除
  
侧滑显示删除按钮3删除
 

Perhaps you have also noticed that the implementation of native js for mobile adaptation has been added to the beginning of the page, mainly to facilitate the better display of mobile pages on screens of different sizes. , also in order to better present the design draft on screens of different sizes with very small errors. The main unit used is rem.

Mobile terminal adaptive js

The principle is actually very simple, which is to calculate the root node html according to different screens font-size, and then use the principle of calculation of rem relative to the font-size of the root node html to realize the size, spacing, etc. of different elements.

Some people say that there is no need to use such js to judge. It is also possible to directly use the responsive @media screen of css3. In fact, I think it is so active on Android screens of various sizes. At the moment, @media screen seems a little unable to handle it.

The rendering is as follows:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

How to use js to implement the horizontal drag and drop navigation bar function

Restrict the upload of uploadify in js Number

The above is the detailed content of JS implements the function of sliding left on the mobile terminal to display the delete button. For more information, please follow other related articles on the PHP Chinese website!