Home > Web Front-end > JS Tutorial > body text

Based on JS, realize the delete button function when sliding left on the mobile terminal

高洛峰
Release: 2017-02-23 17:17:12
Original
1861 people have browsed it

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. I originally wanted to use zepto's touch.js plug-in directly, because the same function was implemented before. I have used this plug-in, and it was quite easy to use at the time. You can just use its swipeLeft and swipeRight methods. However, 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 plug-in 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,






js侧滑显示删除按钮



Copy after login

Perhaps you have also noticed that native js has been added to the beginning of the page to implement mobile adaptation, 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

Copy after login

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:

Based on JS, realize the delete button function when sliding left on the mobile terminal

The above is the JS-based implementation introduced by the editor to realize the function of sliding left on the mobile terminal to display the delete button. , I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles based on JS to realize the delete button function when sliding left on the mobile terminal, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!