最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有用，也不知为什么？所以就弃用了这个插件。

下面是我后来实现后的代码，其实就是用了原生js的touch事件，再结合触摸点的坐标来判断左滑和右滑，

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <title>js侧滑显示删除按钮</title>
  7. <style>
  8. *{margin:0;padding:0;}
  9. body{font-size:.14rem;}
  10. li{list-style:none;}
  11. i{font-style:normal;}
  12. a{color:#393939;text-decoration:none;}
  13. .list{overflow:hidden;padding-left:.3rem;}
  14. .list li{width:120%;border-bottom:1px solid #ddd;}
  15. .list li p{overflow:hidden;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
  16. .list li a{display:inline-block;width:85%;}
  17. .list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
  18. .swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
  19. </style>
  20. <script>
  21. //计算根节点HTML的字体大小
  22. function resizeRoot(){
  23.     var deviceWidth = document.documentElement.clientWidth,
  24.         num = 750,
  25.         num1 = num / 100;
  26.     if(deviceWidth > num){
  27.         deviceWidth = num;
  28.     }
  29.     document.documentElement.style.fontSize = deviceWidth / num1 + "px";
  30. }
  31. //根节点HTML的字体大小初始化
  32. resizeRoot();
  34. window.onresize = function(){
  35.     resizeRoot();
  36. };
  37. </script>
  38. </head>
  39. <body>
  40. <section>
  41. <div class="list">
  42. 	<ul>
  43. 		<li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>
  44. 		<li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>
  45. 		<li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>
  46. 	</ul>
  47. </div>
  48. <script>
  49. //侧滑显示删除按钮
  50. var expansion = null; //是否存在展开的list
  51. var container = document.querySelectorAll('.list li p');
  52. for(var i = 0; i < container.length; i++){
  53.     var x, y, X, Y, swipeX, swipeY;
  54.     container[i].addEventListener('touchstart', function(event) {
  55.         x = event.changedTouches[0].pageX;
  56.         y = event.changedTouches[0].pageY;
  57.         swipeX = true;
  58.         swipeY = true ;
  59.         if(expansion){   //判断是否展开，如果展开则收起
  60.             expansion.className = "";
  61.         }
  62.     });
  63.     container[i].addEventListener('touchmove', function(event){
  64.         X = event.changedTouches[0].pageX;
  65.         Y = event.changedTouches[0].pageY;
  66.         // 左右滑动
  67.         if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
  68.             // 阻止事件冒泡
  69.             event.stopPropagation();
  70.             if(X - x > 10){   //右滑
  71.                 event.preventDefault();
  72.                 this.className = "";    //右滑收起
  73.             }
  74.             if(x - X > 10){   //左滑
  75.                 event.preventDefault();
  76.                 this.className = "swipeleft";   //左滑展开
  77.                 expansion = this;
  78.             }
  79.             swipeY = false;
  80.         }
  81.         // 上下滑动
  82.         if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
  83.             swipeX = false;
  84.         }
  85.     });
  86. }
  88. var i = document.querySelectorAll('.list li i');
  89. i.forEach(function(item, index){
  90. 	i[index].onclick = function(){
  91. 		this.parentNode.parentNode.remove();
  92. 	};
  93. });
  94. </script>
  95. </body>
  96. </html>

上边的js实现代码主要是参考了手机QQ的做法，在出现删除按钮后，只要点击了列表中的任何一个，就会自动收起删除按钮，同样的在点击了删除按钮后也会立马收起。可能有些同学觉得这样不太好，希望在点击删除按钮时不立马收起，在右滑时再将删除按钮收起，这样也是可以的，根据自己的爱好或实际需求来做都可以，以下贴出一个前端同行给出的解决方案（大部分代码都一样，只是删除了在touchstart时的一个判断是否收起的if语句，同时在判断左滑的if判断中加入了是否收起的代码）：

  1. //侧滑显示删除按钮
  2. var container = document.querySelectorAll('.list li p');
  3. for(var i = 0; i < container.length; i++){
  4.     var x, y, X, Y, swipeX, swipeY;
  5.     container[i].addEventListener('touchstart', function(event) {
  6.         x = event.changedTouches[0].pageX;
  7.         y = event.changedTouches[0].pageY;
  8.         swipeX = true;
  9.         swipeY = true ;
  10.     });
  11.     container[i].addEventListener('touchmove', function(event){
  12.         X = event.changedTouches[0].pageX;
  13.         Y = event.changedTouches[0].pageY;
  14.         // 左右滑动
  15.         if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
  16.             // 阻止事件冒泡
  17.             event.stopPropagation();
  19.             if(X - x > 10){   //右滑
  20.                 event.preventDefault();
  21.                 this.className = "";    //右滑收起
  22.             }
  23.             if(x - X > 10){   //左滑
  24.                 event.preventDefault();
  25.                 var swipeLeft = document.getElementsByClassName("swipeleft");
  26.                 for(var j = 0; j < swipeLeft.length; j++){
  27.                 	swipeLeft[j].className = "";
  28.                 }
  29.                 this.className = "swipeleft";   //左滑展开
  30.             }
  31.             swipeY = false;
  32.         }
  33.         // 上下滑动
  34.         if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
  35.             swipeX = false;
  36.         }
  37.     });
  38. }
  40. var i = document.querySelectorAll('.list li i');
  41. i.forEach(function(item, index){
  42. 	i[index].onclick = function(){
  43. 		this.parentNode.parentNode.remove();
  44. 	};
  45. });

也许大家也注意到了，在页面最开始部分加入了原生js对移动端自适应的实现，主要为了方便移动端页面在不同尺寸屏幕上的更好的展现，也是为了在误差很小的情况下能更好的将设计稿近乎完美的呈现在不同尺寸的屏幕上，主要使用到的单位是rem。

移动端自适应js

  1. <script>
  2. //计算根节点HTML的字体大小
  3. function resizeRoot(){
  4.     var deviceWidth = document.documentElement.clientWidth,
  5.         num = 750,
  6.         num1 = num / 100;
  7.     if(deviceWidth > num){
  8.         deviceWidth = num;
  9.     }
  10.     document.documentElement.style.fontSize = deviceWidth / num1 + "px";
  11. }
  12. //根节点HTML的字体大小初始化
  13. resizeRoot();
  15. window.onresize = function(){
  16.     resizeRoot();
  17. };
  18. </script>

原理其实很简单，就是根据不同屏幕来计算根节点html的font-size，再利用rem相对于根节点html的font-size来计算的原理来实现不同元素的大小、间距等。

也有人说其实不用这样的js来判断，直接用css3的响应式@media screen也可以，其实我认为在各种尺寸的安卓屏幕如此活跃的当下，@media screen处理起来就显得有些力不从心了。

效果图如下：

以下附上源代码：

js侧滑显示删除按钮

js移动端向左滑动出现删除按钮的更多相关文章

  1. jquery左划出现删除按钮，右滑隐藏

    jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...

  2. [Xcode 实际操作]五、使用表格-(9)删除UITableView单元格(手势左滑调出删除按钮)

    目录:[Swift]Xcode实际操作 本文将演示如何删除某一行单元格.手势左滑调出删除按钮. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...

  3. 微信小程序列表项滑动显示删除按钮

    微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来 ...

  4. Android ListView实现单击item出现删除按钮以及滑动出现删除按钮

    我自己一个人弄的公司的产品客户端,所以还是想记录下来以免忘记或者丢失... 在我的上一篇博文(点击打开链接)是一个文件管理的东西,基础组件也是ListView所以在此只是改动一下而已. 单击: 点击出 ...

  5. iOS边练边学--简单的数据操作(增、删、改)，左滑动删除和弹窗

    一.数据刷新的原则: 通过修改模型数据,来修改tableView的展示 先修改数据模型 在调用数据刷新方法 不要直接修改cell上面子控件的属性 二.增删改用到的方法: <1>重新绑定屏幕 ...

  6. 写一个js向左滑动删除 交互特效的插件——Html5 touchmove

    需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...

  7. JS实现移动端购物车左滑删除功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  8. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  9. 移动端触屏滑动，JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

随机推荐

  1. TLD视觉跟踪算法（转）

    源:TLD视觉跟踪算法 TLD算法好牛逼一个,这里有个视频,是作者展示算法的效果,http://www.56.com/u83/v_NTk3Mzc1NTI.html.下面这个csdn博客里有人做的相关总 ...

  2. IOS开发－UI学习－UIImageView控件

    在页面上展现本地图片: // 使用本地图片 // 先初始化UIImageView myImageV = [[UIImageView alloc]initWithFrame:CGRectMake(, , ...

  3. cocoaPods的安装使用 以及 Carthage

    http://cnbin.github.io/blog/2015/05/25/cocoapods-an-zhuang-he-shi-yong/ 按照这个步骤就OK Note:当引入已有的project ...

  4. jdom.jar导入问题

    一开始,导入jdom-1.1.1.jar无反应,还是缺包状态 =>将jdom-1.1.1.jar解压,在jdom/build/目录下有jdom.jar导入,success!

  5. windows下Nodejs环境部署

    前言 Nodejs是基于v8引擎的轻量级框架,其特点为事件驱动.非阻塞.单线程.异步回调等. Nodejs相对于其他运行在服务器端的语言,容易学习,使用方便. 本文将介绍windows下Nodejs的 ...

  6. Ubuntu各个版本支持时间

    早期版本:

  7. linux在线预览pdf文件开发思路

    准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swft ...

  8. Leetcode 181. Employees Earning More Than Their Managers

    The Employee table holds all employees including their managers. Every employee has an Id, and there ...

  9. iOS 类库列表

    1. LinqToObjectiveC  #import "NSArray+LinqExtensions.h" 它为NSArray添加了许多方法,能让你用流式API来转换.排序.分 ...

  10. sql相关语言

    SQL 掌握一门编程语言: C C++ Java C# ... 数据库 数据结构/算法 链表 队列 栈 数组 面向对象 网络 (界面.业务逻辑) 关系型数据库: 以二维表的形式组织数据 表.索引.视图 ...