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

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

<!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>js侧滑显示删除按钮</title>

<style>

*{margin:0;padding:0;}

body{font-size:.14rem;}

li{list-style:none;}

i{font-style:normal;}

a{color:#393939;text-decoration:none;}

.list{overflow:hidden;padding-left:.3rem;}

.list li{width:120%;border-bottom:1px solid #ddd;}

.list li p{overflow:hidden;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}

.list li a{display:inline-block;width:85%;}

.list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}

.swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}

</style>

<script>

//计算根节点HTML的字体大小

function resizeRoot(){

    var deviceWidth = document.documentElement.clientWidth,

        num = 750,

        num1 = num / 100;

    if(deviceWidth > num){

        deviceWidth = num;

    }

    document.documentElement.style.fontSize = deviceWidth / num1 + "px";

}

//根节点HTML的字体大小初始化

resizeRoot();

window.onresize = function(){

    resizeRoot();

};

</script>

</head>

<body>

<section>

<div class="list">

	<ul>

		<li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>

		<li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>

		<li><p><a href="#">侧滑显示删除按钮</a><i>删除</i></p></li>

	</ul>

</div>

<script>

//侧滑显示删除按钮

var expansion = null; //是否存在展开的list

var container = document.querySelectorAll('.list li p');

for(var i = 0; i < container.length; i++){

    var x, y, X, Y, swipeX, swipeY;

    container[i].addEventListener('touchstart', function(event) {

        x = event.changedTouches[0].pageX;

        y = event.changedTouches[0].pageY;

        swipeX = true;

        swipeY = true ;

        if(expansion){   //判断是否展开，如果展开则收起

            expansion.className = "";

        }

    });

    container[i].addEventListener('touchmove', function(event){

        X = event.changedTouches[0].pageX;

        Y = event.changedTouches[0].pageY;

        // 左右滑动

        if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){

            // 阻止事件冒泡

            event.stopPropagation();

            if(X - x > 10){   //右滑

                event.preventDefault();

                this.className = "";    //右滑收起

            }

            if(x - X > 10){   //左滑

                event.preventDefault();

                this.className = "swipeleft";   //左滑展开

                expansion = this;

            }

            swipeY = false;

        }

        // 上下滑动

        if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {

            swipeX = false;

        }

    });

}

var i = document.querySelectorAll('.list li i');

i.forEach(function(item, index){

	i[index].onclick = function(){

		this.parentNode.parentNode.remove();

	};

});

</script>

</body>

</html>

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

//侧滑显示删除按钮

var container = document.querySelectorAll('.list li p');

for(var i = 0; i < container.length; i++){

    var x, y, X, Y, swipeX, swipeY;

    container[i].addEventListener('touchstart', function(event) {

        x = event.changedTouches[0].pageX;

        y = event.changedTouches[0].pageY;

        swipeX = true;

        swipeY = true ;

    });

    container[i].addEventListener('touchmove', function(event){

        X = event.changedTouches[0].pageX;

        Y = event.changedTouches[0].pageY;

        // 左右滑动

        if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){

            // 阻止事件冒泡

            event.stopPropagation();

            if(X - x > 10){   //右滑

                event.preventDefault();

                this.className = "";    //右滑收起

            }

            if(x - X > 10){   //左滑

                event.preventDefault();

                var swipeLeft = document.getElementsByClassName("swipeleft");

                for(var j = 0; j < swipeLeft.length; j++){

                	swipeLeft[j].className = "";

                }

                this.className = "swipeleft";   //左滑展开

            }

            swipeY = false;

        }

        // 上下滑动

        if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {

            swipeX = false;

        }

    });

}

var i = document.querySelectorAll('.list li i');

i.forEach(function(item, index){

	i[index].onclick = function(){

		this.parentNode.parentNode.remove();

	};

});

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

移动端自适应js

<script>

//计算根节点HTML的字体大小

function resizeRoot(){

    var deviceWidth = document.documentElement.clientWidth,

        num = 750,

        num1 = num / 100;

    if(deviceWidth > num){

        deviceWidth = num;

    }

    document.documentElement.style.fontSize = deviceWidth / num1 + "px";

}

//根节点HTML的字体大小初始化

resizeRoot();

window.onresize = function(){

    resizeRoot();

};

</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. 开启分布式事物DTC

    1.web服务器开启分布式事物配置后,数据库服务器的host文件要设置  “IP  web服务器主机名” 的映射,否则会 出现 “与基础事务管理器的通信失败” #跨网段使用TransactionSco ...

  2. 企业建站http://www.douco.com/

    http://www.douco.com/ 非常方便的,搭建简单的企业网站

  3. sql2005数据库置疑修复断电崩溃索引损坏 数据库索引错误修复/数据库表损坏/索引损坏/系统表混乱等问题修复

    sql2005数据库置疑修复断电崩溃索引损坏 数据库索引错误修复/数据库表损坏/索引损坏/系统表混乱等问题修复 客 户 名 称 济南某电子商务公司 数 据 类 型 SQL2005数据库 故 障 检 测 ...

  4. ios framework 开发 之 实战二 ，成功

    1. 新建工程.引入cocoapod略过不提 2. 更改cocoapod类名 这是因为,引用framework的工程中,也有一个同样的文件,及文件里同样的类. 这个文件不能删除,但是可以重命名. 3. ...

  5. plupload 异步上传插件使用心得

    plupload 可以不依赖jquery,并且提供了 html5,flash,silverlight,html4 多种上传模式,使用起来比较简单,上一篇博客中介绍了其主要参数哈函数 一.简化用法 &l ...

  6. 让div显示在屏幕中央的css代码段

    .popup{ width:500px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px;     /*注意 ...

  7. 编写快速、高效的JavaScript代码

    许多Javascript引擎都是为了快速运行大型的JavaScript程序而特别设 计的,例如Google的V8引擎(Chrome浏览器,Node均使用该引擎).在开发过程中,如果你关心你程序的内存和 ...

  8. 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（二）

    上一章分析了Live场景中各个元素的作用,这一章开始来分析最关键的部分——打击物件的实现. 上一章放出的视频很模糊,先来看一个清晰版的复习一下:http://www.bilibili.com/vide ...

  9. 添加redo日志组和添加日志组多元化

    查看redo日志组的状态和日志的位置. SQL> 没有被使用,所以切几次日志,组合4已生效. SQL> select * from v$log; GROUP#   THREAD#  SEQ ...

  10. flex chrome浏览器调试flex程序

    flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...