基于jQuery的左滑出现删除按钮的示例

2024-10-23 07:12:59

最近在做项目的时候遇到了个需求，在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果，于是尝试着写了一个，写出来与大家交流分享，大神勿喷。

基本要求

由于我们是在做一个跨平台的APP，里面部分界面其实就是WebView加载的网页，因此需要使用网页实现这样的效果：往左滑动时，显示删除按钮，再往右滑，隐藏删除按钮。

成品示例图

额，先上图吧。下面分别是在PC浏览器里和在Mobile浏览器里的效果。

PC浏览器

手机浏览器

实现思路

为了说明我的实现思路，做了两个图来辅助说明。

首先，请看图1。在图中，我们设置每一行的宽度超过浏览器的宽度，其超出的部分就是放置按钮的区域。由于超出了浏览器的最大宽度，因此按钮区域此时是不可见的，只能显示左侧的常规信息部分。

图1 普通状态

接下来，我们监听左侧常规信息区域，监听滑动事件（具体如何监听先不考虑）。当我们监听到左滑事件时，我们让相应行左偏移，让按钮显示出来，同时左侧超出的部分被遮挡（请看图2）。

图2 左滑状态

当我们右滑时，我们再让相应行回复到左偏移为0的时候就行了。

关键实现方式

对于左滑和右滑，我们通过设定常规信息区域的marin-left来实现，当设定margin-left为负值时，实现左滑，当再次设定margin-left为0时，实现右滑。

对于滑动事件监听，通过监听鼠标（手指）按下和抬起来实现，根据两点的X坐标的差值的正负判定是右滑还是左滑。

完整代码

需要注意的是，我在测试的时候用的是chrome的普通模式和mobile模拟器模式，发现两种模式下监听是不一样的，因此我写了两种监听，这样至少有一种会执行。也许有其他更好的适配方法，但不作为此处的重点。当然也欢迎大家赐教。

至于代码部分，用了jQuery，其实不用也没啥问题的，动画滑动和监听都可以用纯js写，但是由于这不是这里的重点，那么为什么不用jQuery呢？成功者站在巨人的肩膀上，而且咱也没有jQuery写的好 (。・`ω´・)

2015/11/13更新

有位同学提出说代码在QQ手机浏览器和Opera手机浏览器等中没有滑动效果，找了一下大概是帖子里说的原因，于是根据帖子里的提示以及那位同学的一个大神同学的提示，做了一下修改。主要是在touchmove事件中根据横纵坐标位移来判断是否阻止默认事件，如下：

// 横向位移大于纵向位移，阻止纵向滚动
if (Math.abs(delta.x) > Math.abs(delta.y)) {
  event.preventDefault();
}

2016/02/25更新

qq_25558115同学提到：“如果再能给大家提供出只能有一条记录可以左滑，倘若滑动其他的记录，则有左滑记录的要回到原位”。于是进行了简单实现。主要思路如下：

// 用一个变量记录上一次左滑的对象
var lastLeftObj;

// 在左滑发生的时候，判定上一个左滑的对象是否存在，若存在，且不是当前被左滑的对象，则将其右滑
// 同时，记录新的左滑对象
// 在右滑发生时，将上一个左滑对象清空
if (左滑) {
  pressedObj左滑
  lastLeftObj && lastLeftObj != pressedObj && lastLeftObj右滑
  lastLeftObj = pressedObj; // 记录上一个左滑的对象
} else if (右滑) {
  pressedObj右滑
  lastLeftObj = null; // 清空上一个左滑的对象
}

2016/09/06更新

根据马灿发同学提出的bug进行修改：

右滑时进行判断，仅当要右滑的对象（pressedObj）是上一次左滑的对象（lastLeftObj）时才将对象右滑并清空lastLeftObj。

if (pressedObj == lastLeftObj) {...}

根据girlyougo同学的提议，添加“在除本行外的其他区域点击时均复位当前左滑按钮”的功能。思路为在滑动结束时，判定pressedObj!=lastLeftObj，即可知点击/滑动的对象为其他对象：

// 点击除当前左滑对象之外的任意其他位置
if (lastLeftObj && pressedObj != lastLeftObj) {
  $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
  lastLeftObj = null; // 清空上一个左滑的对象
}

实际上，在添加了上述功能之后，前面提到的bug不存在了。不过此处保留了消除bug的那部分代码。

更新后的完整代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左划出现删除按钮，右滑隐藏</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
  // 设定每一行的宽度=屏幕宽度+按钮宽度
  $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
  // 设定常规信息区域宽度=屏幕宽度
  $(".line-normal-wrapper").width($(".line-wrapper").width());
  // 设定文字部分宽度（为了实现文字过长时在末尾显示...）
  $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);

  // 获取所有行，对每一行设置监听
  var lines = $(".line-normal-wrapper");
  var len = lines.length;
  var lastX, lastXForMobile;

  // 用于记录被按下的对象
  var pressedObj; // 当前左滑的对象
  var lastLeftObj; // 上一个左滑的对象

  // 用于记录按下的点
  var start;

  // 网页在移动端运行时的监听
  for (var i = 0; i < len; ++i) {
    lines[i].addEventListener('touchstart', function(e){
      lastXForMobile = e.changedTouches[0].pageX;
      pressedObj = this; // 记录被按下的对象 

      // 记录开始按下时的点
      var touches = event.touches[0];
      start = {
        x: touches.pageX, // 横坐标
        y: touches.pageY // 纵坐标
      };
    });

    lines[i].addEventListener('touchmove',function(e){
      // 计算划动过程中x和y的变化量
      var touches = event.touches[0];
      delta = {
        x: touches.pageX - start.x,
        y: touches.pageY - start.y
      };

      // 横向位移大于纵向位移，阻止纵向滚动
      if (Math.abs(delta.x) > Math.abs(delta.y)) {
        event.preventDefault();
      }
    });

    lines[i].addEventListener('touchend', function(e){
      if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一个左滑的对象
      }
      var diffX = e.changedTouches[0].pageX - lastXForMobile;
      if (diffX < -150) {
        $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑
        lastLeftObj && lastLeftObj != pressedObj &&
          $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑
        lastLeftObj = pressedObj; // 记录上一个左滑的对象
      } else if (diffX > 150) {
       if (pressedObj == lastLeftObj) {
        $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一个左滑的对象
       }
      }
    });
  }

  // 网页在PC浏览器中运行时的监听
  for (var i = 0; i < len; ++i) {
    $(lines[i]).bind('mousedown', function(e){
      lastX = e.clientX;
      pressedObj = this; // 记录被按下的对象
    });

    $(lines[i]).bind('mouseup', function(e){
      if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一个左滑的对象
      }
      var diffX = e.clientX - lastX;
      if (diffX < -150) {
        $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑
        lastLeftObj && lastLeftObj != pressedObj &&
          $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑
        lastLeftObj = pressedObj; // 记录上一个左滑的对象
      } else if (diffX > 150) {
       if (pressedObj == lastLeftObj) {
        $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一个左滑的对象
       }
      }
    });
  }
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
.line-wrapper { width: 100%; height: 144px; overflow: hidden; font-size: 28px; border-bottom: 1px solid #aaa; }
.line-scroll-wrapper { white-space: nowrap; height: 144px; clear: both; }
.line-btn-delete { float: left; width: 132px; height: 144px; }
.line-btn-delete button { width: 100%; height: 100%; background: red; border: none; font-size: 24px; font-family: 'Microsoft Yahei'; color: #fff; }
.line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; }
.line-normal-icon-wrapper { float: right; width: 120px; height: 120px; margin-right: 12px; }
.line-normal-icon-wrapper img { width: 120px; height: 120px; }
.line-normal-avatar-wrapper { width: 100px; height: 124px; float: left; margin-left: 12px; }
.line-normal-avatar-wrapper img { width: 92px; height: 92px; border-radius: 60px; }
.line-normal-left-wrapper { float: left; overflow: hidden; }
.line-normal-info-wrapper { float: left; margin-left: 10px; }
.line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; }
.line-normal-msg { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; }
.line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; }
</style>
</head>
<body>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="1.jpg" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">蜡笔小新</div>
     <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
     <div class="line-normal-time">1分钟前</div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="5.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>删除</button></div>
 </div>
</div>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="2.jpg" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">乔巴</div>
     <div class="line-normal-msg">你看不到我哦</div>
     <div class="line-normal-time">1分钟前</div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="6.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>删除</button></div>
 </div>
</div>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="3.jpg" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">贱行贱远</div>
     <div class="line-normal-msg">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头</div>
     <div class="line-normal-time">1分钟前</div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="7.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>删除</button></div>
 </div>
</div>
<div class="line-wrapper">
 <div class="line-scroll-wrapper">
  <div class="line-normal-wrapper">
   <div class="line-normal-left-wrapper">
    <div class="line-normal-avatar-wrapper"><img src="4.png" /></div>
    <div class="line-normal-info-wrapper">
     <div class="line-normal-user-name">小黄人</div>
     <div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div>
     <div class="line-normal-time">1分钟前</div>
    </div>
   </div>
   <div class="line-normal-icon-wrapper"><img src="8.jpg"/></div>
  </div>
  <div class="line-btn-delete"><button>删除</button></div>
 </div>
</div>
</body>
</html>

总结

代码还比较粗糙，存在很多bug，也有些地方不是那么绝对。比如当我按下时是在第一条记录，然后抬起时是在第二条记录，那么这时候滑动将是第一条记录。但是这个看具体需求了，如果你觉得滑动的对象应该以按下去时的对象为准的话，那就不管在哪抬起都滑动那个按下时的对象；如果你觉得滑动的对象应该是抬起时的对象，那也没问题，或者你觉得按下和抬起时不是同一个对象就不滑动任何对象那也行。总之，看需求。

源码请戳：源码下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例) 如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码代码如下: <!DOCTYPE html> <html> <h
jQuery实现动态添加、删除按钮及input输入框的方法

本文实例讲述了jQuery实现动态添加.删除按钮及input输入框的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</title> <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> </head>
js jquery分别实现动态的文件上传操作按钮的添加和删除

javascript实现复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h
轻松实现jQuery添加删除按钮Click事件

大家登陆一些网站或论坛时,经常会被要求先浏览和确认"用户协议"."用户协议"底部通常会设置一个"我已阅读并同意"复选框,勾选了该复选框,"登陆"按钮才可用. 如下图所示,勾选"I have read and accept."复选框,Login按钮才会相应click事件,登陆成功后切换到欢迎画面. 通常情况我们是怎么实现的呢,很多同学会想到用javascript设置按钮的disabled属性.这当然是一种不错
jQuery Dialog 取消右上角删除按钮事件

废话不多说了,直接给大家贴jquery dialog取消右上角删除按钮的代码了. 具体代码如下所示: $("#div1").dialog({ closeOnEscape:false, open:function(event,ui){$(".ui-dialog-titlebar-close").hide();} }); 以上所述是小编给大家介绍的jquery dialog 取消右上角删除按钮事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.
基于jQuery的左滑出现删除按钮的示例

最近在做项目的时候遇到了个需求,在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果,于是尝试着写了一个,写出来与大家交流分享,大神勿喷. 基本要求由于我们是在做一个跨平台的APP,里面部分界面其实就是WebView加载的网页,因此需要使用网页实现这样的效果:往左滑动时,显示删除按钮,再往右滑,隐藏删除按钮. 成品示例图额,先上图吧.下面分别是在PC浏览器里和在Mobile浏览器里的效果. PC浏览器手机浏览器实现思路为了说明我的实现思路,做了两个图来辅助说明. 首先,请看图1
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)

效果图第一步:加载 <script src="js/jquery.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> 第二步:html <div class="item-wrap"> <div class="item clearfix"> <div clas
iOS App中UITableView左滑出现删除按钮及其cell的重用

UITableView的编辑模式实现UITableView简单的删除功能(左滑出现删除按钮) 首先UITableView需要进入编辑模式.实现下面的方法,即使什么代码也不写也会进入编辑模式: 复制代码代码如下: - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)index
Android仿微信实现左滑显示删除按钮功能

在实际项目中删除列表中的某一项是非常常见的功能,传统的做法可以使用长按监听器等,而现在流行的做法是左滑弹出删除按钮,微信,QQ等都是这么做的,下面做一个示例,代码如下: 主页面MainActivity:代码比较简单常规 package com.home.testslideview; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; im
基于JS实现移动端向左滑动出现删除按钮功能

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

本文实例为大家分享实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
Android 实现左滑出现删除选项

滑动删除的部分主要包含两个部分, 一个是内容区域(用于放置正常显示的view),另一个是操作区域(用于放置删除按钮).默认情况下,操作区域是不显示的,内容区域的大小是填充整个容器,操作区域始终位于内容区域的右面.当开始滑动的时候,整个容器中的所有子view都像左滑动,如果操作区域此时是不可见的,设置为可见. 实现思路就是自定义一个layout SwipeLayout继承自FrameLayout.SwipeLayout包含两个子view,第一个子view是内容区域,第二个子view是操作区域.
基于vue2实现左滑删除功能

左滑删除,很多UI框架里有,比如Mint-UI, Muse-UI等,一开始我们就是用的这两个,但是我们需求是要:左滑的时候出现img然后来实现点击删除,如下: 因为用UI框架,还得改底层代码= =所以,我们小组就直接写了一个- -,心累--此组件多地方使用,所以建议还是放到common下.. <template> <div class="left-delete"> <div class="move" @touchstart="
基于jquery插件实现拖拽删除图片功能

本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下实现以下效果完全拖出这个层,图片会消失,否则图片会回到原来的位置 <html> <head> <title></title> <style type="text/css"> #mydiv{ width:900px; background-color:#444; border:1px solid red} #mydiv2{ width

基于jQuery的左滑出现删除按钮的示例

相关推荐

随机推荐