Js imitation QQ to contact left sliding, slide the delete button operation, js imitation

Js imitation QQ to contact left sliding, slide the delete button operation, js imitation

In this article, we will share with you the following operations on contacts in QQ: Slide left and slide the delete button. If the slide is greater than half, the slide automatically slides to the end. If the slide is less than half, the original position is returned.

Pure js implementation
We use touchmove and other events of h5, and js to dynamically change the translate attribute of css3 to achieve the animation effect:

<! DOCTYPE html> 
Zepto plug-in
In actual projects, we may use this function in many places. Now we will make this function a zepto plug-in for later use.
In this plug-in, we only implement this function, and then pass in the parameter (the style name of the delete button), so that the program can calculate the sliding distance in js to facilitate reuse.
Zepto. touchWipe. js
/*** Zepto plug-in: Slide left to delete the animation * usage: $ ('. itemWipe '). touchWipe ({itemDelete :'. item-delete'}); * parameter: style name of the itemDelete button */; (function ($) {$. fn. touchWipe = function (option) {var defaults = {itemDelete :'. item-delete', // delete element}; var opts = $. extend ({}, defaults, option); // configure the option var delWidth = $ (opts. itemDelete ). width (); var initX; // touch position var moveX; // The position var X = 0 when sliding; // The moving distance var objX = 0; // target object location $ (this ). on ('touchstart', function (event) {event. preventDefault (); var obj = this; initX = event.tar getTouches [0]. pageX; objX = (obj. style. webkitTransform. replace (/translateX \ (/g ,""). replace (/px \)/g, "") * 1; if (objX = 0) {$ (this ). on ('touchmove ', function (event) {event. preventDefault (); var obj = this; moveX = event.tar getTouches [0]. pageX; X = moveX-initX; if (X> = 0) {obj. style. webkitTransform = "translateX (" + 0 + "px)";} else if (X <0) {var l = Math. abs (X); obj. style. webkitTransform = "translateX (" +-l + "px)"; if (l> delWidth) {l = delWidth; obj. style. webkitTransform = "translateX (" +-l + "px)" ;}});} else if (objX <0) {$ (this ). on ('touchmove ', function (event) {event. preventDefault (); var obj = this; moveX = event.tar getTouches [0]. pageX; X = moveX-initX; if (X> = 0) {var r =-delWidth + Math. abs (X); obj. style. webkitTransform = "translateX (" + r + "px)"; if (r> 0) {r = 0; obj. style. webkitTransform = "translateX (" + r + "px)" ;}} else {// slide obj to the left. style. webkitTransform = "translateX (" +-delWidth + "px)" ;}}) ;}) $ (this ). on ('touchend', function (event) {event. preventDefault (); var obj = this; objX = (obj. style. webkitTransform. replace (/translateX \ (/g ,""). replace (/px \)/g, "") * 1; if (objX>-delWidth/2) {obj. style. transition = "all 0.2 s"; obj. style. webkitTransform = "translateX (" + 0 + "px)"; obj. style. transition = "all 0"; objX = 0;} else {obj. style. transition = "all 0.2 s"; obj. style. webkitTransform = "translateX (" +-delWidth + "px)"; obj. style. transition = "all 0"; objX =-delWidth ;}) // returns return this ;}) (Zepto );
TouchWipe.html
<! DOCTYPE html> 
Effect:
 
Application results in actual projects:

Eliminate bugs
In the above step, the functions we need are basically implemented. HoweverSeveral Problems:
1. Failed to click the delete button on the right, because the span cannot bubble to the large button;
2. Very serious problem: we added the touchmove event to the div and used preventDefault () to block the original browser event. As a result, the page cannot be rolled when the div is swiped up or down!
The first problem is easier to solve. We can directly remove span and write "delete" to the before in css, as shown in the following figure:
. ItemWipe. item-delete: before {content: 'delete'; color: # fff ;}
For the second problem, iscroll is used online. Here we refer to the sliding operation on contacts on mobile QQ.
General principle: at the beginning of sliding, determine whether the Y axis is moving more or the X axis is moving more. If the X axis is large, it is regarded as a sliding delete operation. We will use preventDefault ();
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

  

 
   
Simple and common JS sliding door code
 
   
Javascript implementation code for sliding the slider to change the value
 
   
Js jquery allows you to add and delete dynamic File Upload buttons.
 
   
Js uses the display style of the button to achieve the sliding effect of the button
 
   
JavaScript code used to determine the horizontal and vertical screens and to disable the browser slide entries
 
   
Use native js to encapsulate the sliding effect of webapp (Inertial sliding and sliding rebound)
 
   
Use native js to make a simple sliding effect and return to the top
 
   
Native js achieves slideshow and album slide effects for mobile development
 
   
Js implements touch mobile touch screen sliding events