Last active
August 8, 2020 07:14
-
-
Save 3014zhangshuo/09f3932ecb289ad7ffbdb2a3f2e1ed6e to your computer and use it in GitHub Desktop.
模仿APP左滑出删除按钮
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .list { | |
| overflow: hidden; | |
| } | |
| [data-swipe="left"] { | |
| width: 120%; | |
| overflow: hidden; | |
| -webkit-transition: all 0.5s ease; | |
| -moz-transition: all 0.5s ease; | |
| -o-transition: all 0.5s ease; | |
| transition: all 0.5s ease; | |
| } | |
| .swipeleft{ | |
| transform:translateX(-15%); | |
| -webkit-transform:translateX(-15%); | |
| } | |
| .delete-btn { | |
| width: 15%; | |
| float: right; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>左滑显示删除按钮</title> | |
| <style> | |
| body { font-size:.14rem; } | |
| li { list-style:none; } | |
| i { font-style:normal; } | |
| a { color:#393939; text-decoration:none; } | |
| .list{ | |
| overflow:hidden; | |
| margin-top:.2rem; | |
| padding-left:.3rem; | |
| border-top:1px solid #ddd; | |
| } | |
| .list li { | |
| overflow: hidden; | |
| width: 120%; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .list li a { | |
| display: block; | |
| height: .88rem; | |
| line-height: .88rem; | |
| -webkit-transition: all 0.3s linear; | |
| transition: all 0.3s linear; | |
| } | |
| .list li i { | |
| float:right; | |
| width:15%; | |
| text-align:center; | |
| background:#E2421B; | |
| color:#fff; | |
| } | |
| .swipeleft{ | |
| transform:translateX(-15%); | |
| -webkit-transform:translateX(-15%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="list"> | |
| <ul> | |
| <li data-swipe="left"><a href="#">左滑显示删除按钮1<i>删除</i></a></li> | |
| <li data-swipe="left"><a href="#">左滑显示删除按钮2<i>删除</i></a></li> | |
| <li data-swipe="left"><a href="#">左滑显示删除按钮3<i>删除</i></a></li> | |
| </ul> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> | |
| <script> | |
| var swipeLeftItem = null | |
| var startX, startY, endX, endY | |
| $(document).on("touchstart", "[data-swipe='left']", function (event) { | |
| startX = event.changedTouches[0].pageX | |
| startY = event.changedTouches[0].pageY | |
| // closed current swipeLeftItem when item touchstart | |
| if (swipeLeftItem) { | |
| $(swipeLeftItem).removeClass("swipeleft") | |
| } | |
| }) | |
| $(document).on("touchmove", "[data-swipe='left']", function(event) { | |
| endX = event.changedTouches[0].pageX | |
| endY = event.changedTouches[0].pageY | |
| var swipeLeft = startX - endX > 10 // trigger when swiping distance is 10 | |
| var swipingLeftAndRight = Math.abs(endX - startX) - Math.abs(endY - startY) > 0 | |
| if (swipingLeftAndRight) { | |
| event.stopPropagation() | |
| event.preventDefault() | |
| if (swipeLeft) { | |
| swipeLeftItem = this | |
| $(this).addClass("swipeleft") | |
| } else { | |
| $(this).removeClass("swipeleft") | |
| } | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var swipeLeftItem = null | |
| var startX, startY, endX, endY | |
| $(document).on("touchstart", "[data-swipe='left']", function (event) { | |
| startX = event.changedTouches[0].pageX | |
| startY = event.changedTouches[0].pageY | |
| // closed current swipeLeftItem when item touchstart | |
| if (swipeLeftItem) { | |
| $(swipeLeftItem).removeClass("swipeleft") | |
| } | |
| }) | |
| $(document).on("touchmove", "[data-swipe='left']", function(event) { | |
| endX = event.changedTouches[0].pageX | |
| endY = event.changedTouches[0].pageY | |
| var swipeLeft = startX - endX > 10 // trigger when swiping distance is 10 | |
| var swipingLeftAndRight = Math.abs(endX - startX) - Math.abs(endY - startY) > 0 | |
| if (swipingLeftAndRight) { | |
| event.stopPropagation() | |
| event.preventDefault() | |
| if (swipeLeft) { | |
| swipeLeftItem = this | |
| $(this).addClass("swipeleft") | |
| } else { | |
| $(this).removeClass("swipeleft") | |
| } | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://blog.csdn.net/qq_38543537/article/details/78506620