Implement the delete button function on the mobile client by sliding to the left Based on JS.

Recently, when working on a mobile project, you need to implement a delete button when each item on the list page slides left. In fact, this function is very simple. This article mainly introduces how to use js to move the mobile terminal to the left to display the delete button. For more information, see the following, you need to implement a corresponding delete button when each item on the list page slides left. In this case, you want to directly use zepto touch. js plug-in, because I used this plug-in before to implement the same functions. It was quite useful at the time. I just needed to directly use its swipeLeft and swipeRight methods. However, when I started this function again today, however, we found that these two methods were ineffective and did not respond at all. I checked the information online and downloaded the latest zepto and touch. js versions. I don't know why? This plug-in is discarded.

The following is the code I implemented later. In fact, I used the touch event of native js, and then combined with the coordinates of the touch points to determine the Left and Right slides,

 
 Js slide display delete buttonScript // calculate the font size of the root node HTML function resizeRoot () {var deviceWidth = document.doc umentElement. clientWidth, num = 750, num1 = num/100; if (deviceWidth> num) {deviceWidth = num;} document.doc umentElement. style. fontSize = deviceWidth/num1 + "px";} // initialize resizeRoot (); window. onresize = function () {resizeRoot () ;}; script
 
  
 
  
 
  
   
  
Slide display delete button 1Delete
  
   
  
Slide display delete button 2Delete
  
   
  
Slide display delete button 3Delete
 
  
 
  
Script // The delete button var expansion = null is displayed on the slide side. // whether the expanded listvar container = document exists. querySelectorAll ('. list li A'); for (var I = 0; I <container. length; I ++) {var x, y, X, Y, swipeX, swipeY; container [I]. addEventListener ('touchstart', function (event) {x = event. changedTouches [0]. pageX; y = event. changedTouches [0]. pageY; swipeX = true; swipeY = true; if (expansion) {// determine whether to expand. if it is expanded, collapse expansion. className = "" ;}}); container [I]. addEventListener ('touchmove ', function (event) {X = event. changedTouches [0]. pageX; Y = event. changedTouches [0]. pageY; // Slide left and right if (swipeX & Math. abs (X-x)-Math. abs (Y-y)> 0) {// block event bubbling event. stopPropagation (); if (X-x> 10) {// slide right event. preventDefault (); this. className = ""; // slide right} if (x-X> 10) {// Slide left event. preventDefault (); this. className = "swipeleft"; // Slide left to expand expansion = this;} swipeY = false;} // slide up and down if (swipeY & Math. abs (X-x)-Math. abs (Y-y) <0) {swipeX = false ;}});} script
 

You may have noticed that the native js is added to the mobile terminal adaptive implementation at the beginning of the page, mainly to facilitate the better display of mobile terminal pages on screens of different sizes, it is also used to better present the design draft almost perfectly on screens of different sizes with a small error. The main unit used is rem.

Mobile Terminal adaptive js

Script // calculate the font size of the root node HTML function resizeRoot () {var deviceWidth = document.doc umentElement. clientWidth, num = 750, num1 = num/100; if (deviceWidth> num) {deviceWidth = num;} document.doc umentElement. style. fontSize = deviceWidth/num1 + "px";} // initialize resizeRoot (); window. onresize = function () {resizeRoot () ;}; script

The principle is actually very simple, that is, to calculate the html of the root node based on different screensfont-sizeAnd then usefont-sizeTo calculate the size and spacing of different elements.

Some people also say that such js is not used for judgment, and the response @ of css3 is used directly @media screenAlternatively, I think that when Android screens of various sizes are so active ,@media screenIt seems a little powerless.

As follows:

The above section describes how to implement the delete button function by sliding the mobile terminal to the left Based on JS. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. I would like to thank you for your support for PHP chinnet!

For more articles about JS-based deletion Button Function for moving the mobile terminal to the left, please follow PHP Chinese network!