最近在做移动端项目时，需要实现一个列表页面的每一项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. 写一个程序，统计自己C语言共写了多少行代码。ver2.00

    概要 完成一个程序,作用是统计一个文件夹下面所有文件的代码行数.输入是一个文件夹的绝对路径,输出是代码行数.所以此程序的新特点有两个: 统计某一文件夹下的所有文件: 可以任意指定本机硬盘上任何位置的某 ...

  2. 普通项目如何转换成Maven项目 --转载自百度知道

    右键普通Java项目,在弹出的菜单中选择[Configure]-[Convert to Maven Project]: 2 在弹出的对话框中输入项目的groupId, artifactId和versi ...

  3. select into from 和 insert into select 的用法

    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) valu ...

  4. .NET中四种常用事物

    在一个MIS系统中,没有用事务那就绝对是有问题的,要么就只有一种情况:你的系统实在是太小了,业务业务逻辑有只要一步执行就可以完成了.因此掌握事务 处理的方法是很重要,进我的归类在.net中大致有以下4 ...

  5. bzoj2555

    开始时间:19:40 完成时间:21:00 传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2555 题目大意:(1):在当前字符串的后面插入一 ...

  6. debugger 调试的一些经验

    1. 如果没有firebug , 可以用firebug-lite.js 内嵌的调试方式. 2. console.log 不是所有浏览器都支持console.log 在IE或者没有调试窗口的浏览器中,c ...

  7. imageX及其安装windows

    /capture    将卷映像捕获到新 WIM 文件中(备份成wim) imagex /capture g:  e:\7setted.wim "Drive G" /apply   ...

  8. nmon在线安装及使用

    安装 mkdir /usr/local/nmon cd /usr/local/nmon wget http://sourceforge.net/projects/nmon/files/nmon_lin ...

  9. iOS 之 二维码生成与扫描（LBXScan）

    参考:https://github.com/MxABC/LBXScan 步骤如下: 1. 下载 通过参考网址进行下载. 2. 导入 导入整个LBXScan文件夹 3. 配置 在pch中加入 #impo ...

  10. PHP之Mysql常用SQL语句示例的深入分析

    1.插入数据insert into表名(列名1,列名2,列名..) values(值1,值2,值...); insert into product(name, price, pic_path) val ...