最近在做移动端项目时，需要实现一个列表页面的每一项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开发－ObjC－Category的使用

    在IOS移动App开发中,经常会出现以下情况:定义好了一个类,但后来需求升级或改变之后需要对这个类增加功能,这样的话往往需要修改类的结构,这样就会导致不能预期的问题产生,所以Obj-C提供了一种叫做C ...

  2. 两台机子的repcached Memcache 的安装与实验

    安装memcached前先要确定系统是否安装了gcc: 1.解压安装包: tar -zxf memcached-1.2.8-repcached-2.2.tar.gz 2.编译: 系统应安装了libev ...

  3. 《C++ Primer》 chapter 15 TextQuery

    <C++ Primer>中第15章为了讲解面向对象编程,举了一个例子:设计一个小程序,能够处理查询给定word在文件中所在行的任务,并且能够处理“非”查询,“或”查询,“与”查询.例如执行 ...

  4. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  5. Sigmoid函数

    Sigmoid函数是一个S型函数. Sigmoid函数的数学公式为: 它是常微分方程 的一个解. Sigmoid函数具有如下基本性质: 定义域为 值域为, 为有界函数 函数在定义域内为连续和光滑函数 ...

  6. magento中文语言包的使用

    magento中文语言包的使用,我们在百度上随便就能找到一大堆. 由于本人今天是第一次使用magento,找到目录magento/app/locale  并且用语言包中的locale文件夹替换掉mag ...

  7. 笔记整理——C语言-http

    C语言 HTTP GZIP数据解压 - 大烧饼的实验室 - 博客园 - Google Chrome (2013/4/10 18:22:26) C语言 HTTP GZIP数据解压   这个代码在http ...

  8. 基于Flex的HTTPService（GET和POST）

    一.基于GET的HTTPService: <?xml version="1.0" encoding="utf-8"?><mx:Applicat ...

  9. Ninja介绍

    什么是Ninja 在Unix/Linux下通常使用Makefile来控制代码的编译,但是Makefile对于比较大的项目有时候会比较慢,看看上面那副漫画,代码在编译都变成了程序员放松的借口了.所以这个 ...

  10. SecureCRT 选择Courier New等其他字体.

    http://justwinit.cn/post/5813/ 如何解决SecureCRT无法选择Courier New等其他字体最终解决办法:到C:\Windows\Fonts目录下,找到Courie ...