最近在做移动端项目时，需要实现一个列表页面的每一项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. VB.NET中网络编程所需组件WinHTTP的添加

    VB.NET中网络编程所需组件: WinHTTP组件:项目-->添加引用-->COM选项卡-->Microsoft WinHTTP Services,version 5.1--> ...

  2. builds error

    使用cocoapods 出现Undefined symbols for architecture i386: _OBJC_CLASS_$_XXXXXXX", referenced from: ...

  3. java实现——035第一个只出现一次的字符

    import java.util.Hashtable; public class T035 { public static void main(String[] args) { FirstNotRep ...

  4. 学习swing界面

    最近做自动数据平台,没有界面.周末于是想用java实现一个可视化的界面. package cn.wuwenfu.swing; import java.awt.FlowLayout; import ja ...

  5. Python3基础 使用for循环 删除一个列表中的重复项

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  6. 更改pandas dataframe 列的顺序

    摘自 stackoverflow 这是我的df: Net Upper Lower Mid Zsore Answer option More than once a day 0% 0.22% -0.12 ...

  7. 网上搜集的一段php可逆加密函数

    php加密函数: function my_encrypt($data, $key='unun.in') { $char = $str = ''; $key = md5($key); $x = 0; $ ...

  8. KERNEL32相关函数

    CALL DWord Ptr [<&KERNEL32.WriteFile>] kernel32.WriteFile 将数据写入一个文件,也可将这个函数应用于对通信设备.管道.套接字 ...

  9. ASP.NET MVC中使用异步控制器

    线程池 一直想把项目改写成异步,但是ASP.NETMVC3下写的过于繁琐,.NET 4.5与ASP.NET MVC下代码写起来就比较简单了, MS好像也一直喜欢这样搞,每一个成熟的东西,都要演变好几个 ...

  10. STL内存管理

    1. 概述 STL Allocator是STL的内存管理器,也是最低调的部分之一,你可能使用了3年stl,但却不知其为何物. STL标准如下介绍Allocator the STL includes s ...