最近在做移动端项目时，需要实现一个列表页面的每一项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. 【转】iOS开发路线简述

    简单看了下楼主说的很详细,尤其是最后面那个图描述很直观,让想学习ISO开发的程序猿很清晰每个步骤学习的内容,在此收藏下. iOS系统以及iPhone的出来都要感谢乔布斯,一个完美主义者,从如此优秀的i ...

  2. Elasticsearch的使用场景深入详解

    了解了ES的使用场景,ES的研究.使用.推广才更有价值和意义. 1.场景-:使用Elasticsearch作为主要的后端 传统项目中,搜索引擎是部署在成熟的数据存储的顶部,以提供快速且相关的搜索能力. ...

  3. VMVare 桥接上网

    桥接模式设置小解: 第1步 虚拟机下fedora安装好后,打开VM虚拟机的菜单栏,单击编辑------虚拟网络编辑器,选择“主机虚拟网络 映射”标签,然后把VMnet0 手动选择为你本地的物理网卡(要 ...

  4. 安装了C

    2014-04-09 13:19:30 大学里看的第一本编程书籍,就是C.但是一直没有编译. 今天首次安装,我也佩服当初我是怎么通过C二级的. 上午写了sds手册.其中的制图用的visio制图,非常好 ...

  5. java系列--JDBC连接oracle

    <oracle开发实战经典><oracle DBA从入门到精通> JDBC连接数据库 JNDI连接池 oracle.jdbc.driver.OracleDriver 其实就是一 ...

  6. SQL数据库置疑修复

    SQL数据库置疑修复 首先分析数据库置疑的原因,查明原因分析数据库置疑修复的方法,解决置疑后,考虑数据库置疑的预防方案.   数据库置疑产生的原因: 1.sql所在分区空间是否够?数据库文件大小是否达 ...

  7. 解開32位元Win 7記憶體4GB限制

    解開32位元Win 7記憶體4GB限制: ReadyFor4GB 檔案下載:ReadyFor4GB https://sites.google.com/a/joytown.tw/bai-jia-zhi/ ...

  8. C# Winform窗口之间传值的多种方法浅析（转）

    摘要http://www.jb51.net/article/63837.htm 这篇文章主要介绍了C# Winform窗口之间传值的多种方法浅析,本文起讲解了通过构造器传值.通过属性传递.通过事件携带 ...

  9. 如何解决PHP+MySQL出现乱码的现象

    在使用PHP+MYSQL时,您是否遇到过字符乱码的问题呢?您是如何解决这个问题的呢?这里提供了一种解决之道. 在mysql_connect后面加一句SET NAMES UTF8,即可使得UTF8的数据 ...

  10. IIS8中添加WCF支持几种方法小结[图文]

    方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少 ...