接触前端有半年的时间了,不会的都会去搜索别人的代码,这是本人第一篇博客,也是因为在搜索了很多关于左滑删除的例子,但是结果并不是很好,虽然样式上面实现了,但是大多数都会有无法点击删除或是无法控制事件的困扰,所以简单整理一种写法,菜鸟一只,只求不喷~
先简单说一下思路,在一个 container 容器里面,定义两个平级的标签 【显示内容 + 删除按钮】,,按钮绝对定位在右侧,z-index 在后方,需要固定宽度,当滑动显示内容的部分,按钮显示出来。通过 active 的添加和删除实现,下面是代码部分:
首先,html 部分,很简单,一个简单的内容,一个 delete 按键
- 左滑删除Delete
- 左滑删除Delete
加上简单的 CSS 样式(微丑)
- * {
- margin: 0;
- padding: 0;
- list - style: none;
- }.swipe - delete {
- margin: 0 auto;
- }
- li {
- position: relative;
- border - bottom: 1px solid red;
- }.behind {
- position: relative;
- width: 100 % ;
- height: 60px;
- line - height: 60px;
- z - index: 10;
- background: #ffffff;
- transition: all 0.3s ease; - webkit - transition: all 0.30s ease;
- }.active {
- transform: translate( - 60px, 0) translateZ(0); - webkit - transform: translate( - 60px, 0) translateZ(0);
- }
- span {
- position: absolute;
- right: 0;
- bottom: 0;
- top: 0;
- width: 60px;
- color: #ffffff;
- text - align: center;
- background: red;
- font - size: 20px;
- line - height: 60px;
- z - index: 1;
- }
- 效果如下:
js 来喽~ 【注】需要引入 zepto.js
- $(function() {
- var oBody = $(document.body),
- X,
- Y,
- startX,
- startY,
- moveEndX,
- moveEndY;
- //第一步:获取触碰的位置坐标
- oBody.on("touchstart", "li",
- function(e) {
- startX = e.originalEvent.changedTouches[0].pageX;
- startY = e.originalEvent.changedTouches[0].pageY;
- });
- //abs()是取到元素的绝对值,下面是通过判断touch坐标来决定滑动方向
- oBody.on("touchmove", "li",
- function(e) {
- e.preventDefault();
- moveEndX = e.originalEvent.changedTouches[0].pageX;
- moveEndY = e.originalEvent.changedTouches[0].pageY;
- X = moveEndX - startX;
- Y = moveEndY - startY;
- var $touchDoom = $(this).children(".behind");
- //X轴的绝对值大于Y轴的绝对值并且x<0,是向左滑动
- if (Math.abs(X) > Math.abs(Y) && X < 0) {
- //给每一个默认滑动的元素增加默认属性data-touch ,data-touch == 'true',表示可以滑动
- if ($touchDoom.attr("data-touch") == 'true') {
- $(this).siblings('li').find(".behind").attr("data-touch", "true").removeClass("active");
- $touchDoom.addClass("active");
- $touchDoom.attr("data-touch", "false");
- }
- }
- //反之......
- else if (Math.abs(X) > Math.abs(Y) && X > 0) {
- if ($touchDoom.attr("data-touch") == 'false') {
- $touchDoom.removeClass("active");
- $touchDoom.attr("data-touch", "true");
- }
- }
- });
- //点击删除
- oBody.on("click", "li span",
- function() {
- var parent = $(this).parent("li");
- $(this).parent("li").hide(200,
- function() {
- parent.remove();
- });
- });
- });
- 附上完整代码,仅供参考
- JQM Swipe Delete
- * {
- margin: 0;
- padding: 0;
- list - style: none;
- }.swipe - delete {
- margin: 0 auto;
- }
- li {
- position: relative;
- border - bottom: 1px solid red;
- }.behind {
- position: relative;
- width: 100 % ;
- height: 60px;
- line - height: 60px;
- z - index: 10;
- background: #ffffff;
- transition: all 0.3s ease; - webkit - transition: all 0.30s ease;
- }.active {
- transform: translate( - 60px, 0) translateZ(0); - webkit - transform: translate( - 60px, 0) translateZ(0);
- }
- span {
- position: absolute;
- right: 0;
- bottom: 0;
- top: 0;
- width: 60px;
- color: #ffffff;
- text - align: center;
- background: red;
- font - size: 20px;
- line - height: 60px;
- z - index: 1;
- }
- 左滑删除Delete
- 左滑删除Delete
- 左滑删除Delete
- 左滑删除Delete
- 左滑删除Delete
- $(function() {
- var oBody = $(document.body),
- X,
- Y,
- startX,
- startY,
- moveEndX,
- moveEndY;
- oBody.on("touchstart", "li",
- function(e) {
- startX = e.originalEvent.changedTouches[0].pageX;
- startY = e.originalEvent.changedTouches[0].pageY;
- });
- oBody.on("touchmove", "li",
- function(e) {
- e.preventDefault();
- moveEndX = e.originalEvent.changedTouches[0].pageX;
- moveEndY = e.originalEvent.changedTouches[0].pageY;
- X = moveEndX - startX;
- Y = moveEndY - startY;
- var $touchDoom = $(this).children(".behind");
- if (Math.abs(X) > Math.abs(Y) && X < 0) {
- if ($touchDoom.attr("data-touch") == 'true') {
- $(this).siblings('li').find(".behind").attr("data-touch", "true").removeClass("active");
- $touchDoom.addClass("active");
- $touchDoom.attr("data-touch", "false");
- }
- } else if (Math.abs(X) > Math.abs(Y) && X > 0) {
- if ($touchDoom.attr("data-touch") == 'false') {
- $touchDoom.removeClass("active");
- $touchDoom.attr("data-touch", "true");
- }
- }
- });
- oBody.on("click", "li span",
- function() {
- var parent = $(this).parent("li");
- $(this).parent("li").hide(200,
- function() {
- parent.remove();
- });
- });
- });
来源: http://www.bubuko.com/infodetail-1864717.html