This article will share with you the examples of implementing operations on contacts similar to QQ: swipe left and slide out the delete button. If it slides more than half, it will automatically slide to the bottom. If it releases less than half, it will return to its original place.
Pure js implementation
Use h5 touchmove and other events, and use js to dynamically change the translate attribute of css3 to achieve animation effect:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>html5Swipe left to delete the special effect</title> <style> * { padding: 0; margin: 0; list-style: none; } header { background: #f7483b; border-bottom: 1px solid #ccc } header h2 { text-align: center; line-height: 54px; font-size: 16px; color: #fff } .list-ul { overflow: hidden } .list-li { line-height: 60px; border-bottom: 1px solid #fcfcfc; position: relative; padding: 0 12px; color: #666; background: #f2f2f2; -webkit-transform: translateX(0px); } .btn { position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px } </style> <script> /* * Description: html5 Apple phone swipes left to delete the special effects*/ window.addEventListener('load', function() { var initX; //Touch position var moveX; //Position var X = 0; //Movement distance var objX = 0; //Target object position window.addEventListener('touchstart', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { initX = event.targetTouches[0].pageX; objX = (obj.style.WebkitTransform.replace(/translateX/(/g, "").replace(/px/)/g, "")) * 1; } if (objX == 0) { window.addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[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 > 80) { l = 80; obj.style.WebkitTransform = "translateX(" + -l + "px)"; } } } } }); } else if (objX < 0) { window.addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { var r = -80 + Math.abs(X); obj.style.WebkitTransform = "translateX(" + r + "px)"; if (r > 0) { r = 0; obj.style.WebkitTransform = "translateX(" + r + "px)"; } } else { //Swipe left obj.style.WebkitTransform = "translateX(" + -80 + "px)"; } } }); } }); } }) window.addEventListener('touchend', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { objX = (obj.style.WebkitTransform.replace(/translateX/(/g, "").replace(/px/)/g, "")) * 1; if (objX > -40) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; objX = 0; } else { obj.style.WebkitTransform = "translateX(" + -80 + "px)"; objX = -80; } } }) }) </script></head><body> <header> <h2>Message List</h2> </header> <section> <ul> <li id="li"> <div> Your express delivery has arrived, please sign downstairs</div> <div>Delete</div> </li> <li> <div> Wow, what are you doing? Come quickly and wait for you</div> <div>Delete</div> </li> </ul> </section></body></html>Made into zepto plugin
In actual projects, we may have many places that use this function. Now we have made this function into a zepto plug-in for easy use later.
In this plugin, we only implement this function, and then pass in parameters (delete the style name of the button) to allow the program to calculate the distance needed to slide in js, which is convenient for reuse.
zepto.touchWipe.js
/** * zepto plug-in: swipe left to delete the animation effect* Usage method: $('.itemWipe').touchWipe({itemDelete: '.item-delete'}); * Parameters: itemDelete The style name of the delete button*/;(function($) { $.fn.touchWipe = function(option) { var defaults = { itemDelete: '.item-delete', //Delete element}; var opts = $.extend({}, defaults, option); //Configuration options var delWidth = $(opts.itemDelete).width(); var initX; //Touch position var moveX; //Position var X = 0; //Movement distance var objX = 0; //Target object position $(this).on('touchstart', function(event) { event.preventDefault(); var obj = this; initX = event.targetTouches[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.targetTouches[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.targetTouches[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 { //Swipe left obj.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.2s"; obj.style.WebkitTransform = "translateX(" + 0 + "px)"; obj.style.transition = "all 0"; objX = 0; } else { obj.style.transition = "all 0.2s"; obj.style.WebkitTransform = "translateX(" + -delWidth + "px)"; obj.style.transition = "all 0"; objX = -delWidth; } }) //Chain return this; };})(Zepto);touchWipe.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"><title>html5Swipe left to delete the special effect</title><style> *{ padding:0; margin:0; list-style: none;} header{ background: #f7483b; border-bottom: 1px solid #ccc} header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff} .list-ul{ overflow: hidden} .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position: relative; padding: 0 12px; color: #666; background: #f2f2f2; -webkit-transform: translateX(0px); } .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px}</style></head><body><header> <h2>Message List</h2></header><section> <ul> <li id="li"> <div> Your express delivery has arrived, please sign downstairs</div> <div> Delete</div> </li> <li> <div> Wow, what are you doing? Come quickly and wait for you</div> <div> Delete</div> </li> </ul></section><p>X: <span id="X"></span></p><p>objX: <span id="objX"></span></p><p>initX: <span id="initX"></span></p><p>moveX: <span id="moveX"></span></p><script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script><script type="text/javascript" src="zepto.touchWipe.js"></script><script type="text/javascript"> $(function() { $('.list-li').touchWipe({itemDelete: '.btn'}); });</script></body></html>Effect:
Application effects in actual projects:
Eliminate bugs
Going to the above step, we basically realize the functions we need. But there are several problems :
1. The click of the delete button on the right fails because the span cannot bubble onto the large button;
2. A very serious problem. We added a touchmove event to the div and blocked the original browser event with preventDefault(), which caused the page to be unable to scroll when sliding up and down the div!
The first problem is easier to solve. We remove the span directly and write "delete" into css: before, like this:
.itemWipe .item-delete:before { content: 'delete'; color: #fff;}For the second problem, it is said that it iscroll to solve it online. Here we refer to the sliding operation of contacts in mobile QQ.
General principle: At the beginning of sliding, determine whether the Y-axis moves more or the X-axis moves more. If the X-axis moves large, it is judged as a sliding deletion operation, and we will use preventDefault();
The above is all about this article, I hope it will be helpful to everyone's learning.