app划动删除，→滑动隐藏删除按钮

最新推荐文章于 2022-04-05 08:00:00 发布
最新推荐文章于 2022-04-05 08:00:00 发布
阅读量425 收藏
点赞数
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
     <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>左划出现删除按钮，右滑隐藏</title>
    <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; }
        .btn_del { float: left; width: 132px; height: 144px; }
        .btn_del 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; }
        .right_img { float: right; width: 120px; height: 120px; margin-right: 12px; }
        .right_img img { width: 120px; height: 120px; }
        .left_img { width: 100px; height: 124px; float: left; margin-left: 12px; }
        .left_img img { width: 92px; height: 92px; border-radius: 60px;margin-top: 16px }
        .left_content { float: left; overflow: hidden; }
        .con_text { float: left; margin-left: 10px; }
        .con_text1 { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; }
        .con_text2 { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; }
        .con_text3 { height: 28px; line-height: 28px; color: #999; margin-top: 11px; }
    </style>

</head>
<body>
<div class="line-wrapper" id="1">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="left_content">
                <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" /></div>
                <div class="con_text">
                    <div class="con_text1">蜡笔小新</div>
                    <div class="con_text2">在同行的小伙伴中提到了你</div>
                    <div class="con_text3">1分钟前</div>
                </div>
            </div>
            <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg"/></div>
        </div>
        <div class="btn_del" id="btn1"><button>删除</button></div>
    </div>
</div>


<div class="line-wrapper" id="2">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="left_content">
                <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg" /></div>
                <div class="con_text">
                    <div class="con_text1">乔巴</div>
                    <div class="con_text2">你看不到我哦</div>
                    <div class="con_text3">1分钟前</div>
                </div>
            </div>
            <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_4.png"/></div>
        </div>
        <div class="btn_del" id="btn2"><button>删除</button></div>
    </div>
</div>
<div class="line-wrapper" id="3">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="left_content">
                <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_5.jpg" /></div>
                <div class="con_text">
                    <div class="con_text1">渐行渐远</div>
                    <div class="con_text2">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头</div>
                    <div class="con_text3">1分钟前</div>
                </div>
            </div>
            <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_6.jpg"/></div>
        </div>
        <div class="btn_del" id="btn3"><button>删除</button></div>
    </div>
</div>
<div class="line-wrapper" id="4">
    <div class="line-scroll-wrapper">
        <div class="line-normal-wrapper">
            <div class="left_content">
                <div class="left_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_7.jpg" /></div>
                <div class="con_text">
                    <div class="con_text1">小黄人</div>
                    <div class="con_text2">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div>
                    <div class="con_text3">1分钟前</div>
                </div>
            </div>
            <div class="right_img"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_8.jpg"/></div>
        </div>
        <div class="btn_del" id="btn4"><button>删除</button></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        // 设定每一行的宽度=屏幕宽度+按钮宽度
        $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".btn_del").width());
        // 设定常规信息区域宽度=屏幕宽度
        $(".line-normal-wrapper").width($(".line-wrapper").width());
        // 设定文字部分宽度（为了实现文字过长时在末尾显示...）
        $(".con_text2").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; // 清空上一个左滑的对象
                    }
                }
            });
        }
    });
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#1").remove();
        });
        $("#btn2").click(function(){
            $("#2").remove();
        });
        $("#btn3").click(function(){
            $("#3").remove();
        });
        $("#btn4").click(function(){
            $("#4").remove();
        });
    });

</script>


2、备用代码

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <title>html5向左滑动删除特效</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }


        header {
            background: #f7483b;
            border-bottom: 1px solid #ccc
        }


        header h2 {
            text-align: center;
            line-height: 54px;
            font-size: 16px;
            color: #fff
        }


        .list-ul {
            overflow: hidden
        }


        .list-li {
            line-height: 60px;
            border-bottom: 1px solid #fcfcfc;
            position: relative;
            padding: 0 12px;
            color: #666;
            background: #f2f2f2;
            -webkit-transform: translateX(0px);
        }


        .btn {
            position: absolute;
            top: 0;
            right: -80px;
            text-align: center;
            background: #ffcb20;
            color: #fff;
            width: 80px
        }
    </style>
    <script>
        /*
         * 描述：html5苹果手机向左滑动删除特效
         */
        window.addEventListener('load', function() {
            var initX; //触摸位置
            var moveX; //滑动时的位置
            var X = 0; //移动距离
            var objX = 0; //目标对象位置
            window.addEventListener('touchstart', function(event) {
                event.preventDefault();
                var obj = event.target.parentNode;
                if (obj.className == "list-li") {
                    initX = event.targetTouches[0].pageX;
                    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
                }
                if (objX == 0) {
                    window.addEventListener('touchmove', function(event) {
                        event.preventDefault();
                        var obj = event.target.parentNode;
                        if (obj.className == "list-li") {
                            moveX = event.targetTouches[0].pageX;
                            X = moveX - initX;
                            if (X >= 0) {
                                obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                            } else if (X < 0) {
                                var l = Math.abs(X);
                                obj.style.WebkitTransform = "translateX(" + -l + "px)";
                                if (l > 80) {
                                    l = 80;
                                    obj.style.WebkitTransform = "translateX(" + -l + "px)";
                                }
                            }
                        }
                    });
                } else if (objX < 0) {
                    window.addEventListener('touchmove', function(event) {
                        event.preventDefault();
                        var obj = event.target.parentNode;
                        if (obj.className == "list-li") {
                            moveX = event.targetTouches[0].pageX;
                            X = moveX - initX;
                            if (X >= 0) {
                                var r = -80 + Math.abs(X);
                                obj.style.WebkitTransform = "translateX(" + r + "px)";
                                if (r > 0) {
                                    r = 0;
                                    obj.style.WebkitTransform = "translateX(" + r + "px)";
                                }
                            } else { //向左滑动
                                obj.style.WebkitTransform = "translateX(" + -80 + "px)";
                            }
                        }
                    });
                }


            })
            window.addEventListener('touchend', function(event) {
                event.preventDefault();
                var obj = event.target.parentNode;
                if (obj.className == "list-li") {
                    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
                    if (objX > -40) {
                        obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                        objX = 0;
                    } else {
                        obj.style.WebkitTransform = "translateX(" + -80 + "px)";
                        objX = -80;
                    }
                }
            })
        })
    </script>
</head>


<body>
<header>
    <h2>消息列表</h2>
</header>
<section class="list">
    <ul class="list-ul">
        <li id="li" class="list-li">
            <div class="con">
                测试内容第一条
            </div>
            <div class="btn">删除</div>
        </li>
        <li class="list-li">
            <div class="con">
                测试内容第二条
            </div>
            <div class="btn">删除</div>
        </li>
    </ul>
</section>
</body>


</html>

qq_40250105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现app滑动删除
12-14
帮助html页面实现在混合开发中的滑动删除功能，提高用户体验
移动端html5实现列表左滑删除
08-17
移动端html5实现列表左滑删除
左右滑动事件，左划出现删除按钮，右滑隐藏
weixin_33885676的博客
09-13 370
先看效果图： 参考了别人写的demo做了修改，参考地址：https://github.com/Orange1991/demos-in-sfg.name/tree/14eeaec62f2cba35ec42666080484f9647902d72 做了修改的测试代码： 1 <!doctype html> 2 <html> 3 4 &...
点击删除按钮弹出_iOS 13 新功能体验快速删除 App
weixin_39605521的博客
12-24 2067
昨天给大家分享了利用快捷指令实现自定义图标的小技巧，操作很简单大家多看了几遍也就学会了，不过，在昨天的后台留言中，我发现貌似还有很多人对 iOS 13 新增的删除App方式还不了解。在 iOS 13 系统中，除了大的改动以外，苹果其实也作了很多细节调整，其中关于删除App的方式就新增了好几个，相信在在看这篇文章之前还有很多人不知道。上手体验首先，大家最常见的长按图标删除App，在 iOS...
Android ListView 横向滑动删除 Item
weixin_30892763的博客
07-06 118
注册ListView的onTouchListener() 具体代码如下： listview.setOnTouchListener(new OnTouchListener() { float x,y,ux,uy; @Override public boolean onTouch(View v, MotionEvent event) { // ...
Ionic 2 实现列表滑动删除按钮的方法
08-31
现在，当你滑动列表中的项并向左拖动，删除按钮就会出现。点击按钮会调用removeItem方法，根据传入的item从items数组中删除对应的项，从而实现列表的滑动删除功能。 总结：在Ionic 2中实现列表滑动删除功能，主要...
Android App中ListView仿QQ实现滑动删除效果的要点解析
09-02
本文将深入解析如何在Android App中仿照QQ实现ListView的滑动删除效果。 首先，实现滑动删除的核心在于监听用户的触摸手势。这通常通过重写ListView的滑动手势检测来完成。在`QQListView`类中，我们需要覆写`...
Android ListView滑动删除操作（SwipeListView）
09-01
SwipeListView是由FortySevenDegrees开发并维护的一个Android库，它扩展了ListView的功能，允许用户通过滑动手势来显示额外的操作视图，如删除按钮。SwipeListView的核心机制是通过在每个列表项背后隐藏一个额外的...
Android自定义Seekbar滑动条 Pop提示跟随滑动按钮滑动
08-27
在布局文件中，我们可以使用自定义的属性，例如app:textsize、app:textcolor、app:img等，来设置跟随滑动按钮的文字大小、颜色和背景图片。 在自定义Seekbar控件的Java代码中，我们可以使用 Paint 对象来绘制背景...
微信小程序实现滑动删除效果
08-30
删除按钮使用绝对定位（position: absolute），初始时隐藏在屏幕右侧，当滑动时通过改变`right`属性值使其露出。 `drawStart`函数负责记录触摸开始时的位置，`drawMove`函数则在手指移动时更新元素的`right`属性，...
滑动按钮—C#语言开发安卓App,实现滑动按钮效果的代码
04-18
最近在公司实习，导师交了一个任务，做出一个滑动按钮，查找资料想办法，解决了任务。现在把代码贡献出来，小菜鸟，各位见谅。
uniapp 左滑删除详细介绍
qq_39882919的博客
06-10 3122
// A code block var foo = 'bar'; <template> <!-- 我的银行卡 start --> <view class="container"> <!-- 头部图片 --> <view class="assetstop"> <image class="asstop" src="/static/common/assetop.png" mode=""></image>
uniapp——左滑编辑删除按钮实现，以及表单验证
NanChen的博客
01-17 2130
滑动交互 1、下载插件，引入 2、使用方法 /* 引用 */ import tSlide from "@/components/t-slide/t-slide.vue" components:{tSlide} /* 使用 */ <template> <view class="t-wrap" > <t-slide ref="slide" @edit="edit" @del="del" @itemClick="itemClick">
H5页面模拟app滑动删除
技术之家 www.5ceo.cn
09-10 2114
最近一直在研究如何做到app那样左滑动删除，长按删除，如今终于解决了这个问题 //H5页面模拟app滑动删除 原生H5页面模拟APP侧滑删除效果 *{ margin:0; padding:0; list-style:none} body{ font-size:0.12rem; color:#666;} .ui-loader{ display:none} .my-address-li
uni-app 实现列表左滑删除按钮
qq_36864210的博客
10-13 8791
首先了解一下实现功能的几个重要事件： 1、touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 2、touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 3、touchend事件：当手指从屏幕上离开的时候触发。 4、touchcancel事件：当系统停止跟踪触摸的时候触发。 接下来实现功能： 一、初始化数据 data{ return{ //列表数据（根据自己的业务获取） csLis
H5实现app左滑删除功能
qq_34950354的博客
06-25 2914
点击显示删除以外的地方自动滑动隐藏掉左滑按钮，js里有关闭方法，可用做点击返回按钮隐藏左滑的按钮，
app左滑删除效果
羽下佳人的博客
04-07 1290
百度云： 编程 --> 插件 -->  下载插件               编程 -->  项目 -->  新功能 效果图： html: body> header>     h2>消息列表h2> header> section class="list">     ul class="list-ul">         li id="li" class="l
Web App 开发-----滑动显示功能按钮，点击按钮触发事件
m0_58760840的博客
04-05 424
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link...
移动端滑动屏幕隐藏div
z467469274的博客
04-01 2402
btn.on('click',function(){ $(".positionR").show(); $(".zhezhao").show() var obj=$(".positionR") var oBtn=$('#btn'); $('.zhezhao').on('touchstart',func
uniapp滑动删除
最新发布
08-24
5. 在滑动结束（`drawEnd`）事件处理方法中，判断滑动的距离是否超过了删除按钮的一半宽度，如果超过了，则执行删除操作；否则，将视图组件恢复原位。 以上是使用原生的手势事件来实现滑动删除功能的方法。另外，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值