仿QQ左滑出现删除，只能有一条记录显示有左滑js实现

最新推荐文章于 2022-11-18 13:49:40 发布

yuankeyan2012

最新推荐文章于 2022-11-18 13:49:40 发布

阅读量3.3k

点赞数 1

分类专栏： html js css 文章标签：仿QQ左滑删除左滑js 只能有一条记录左滑

本文链接：https://blog.csdn.net/yuankeyan2012/article/details/50510959

版权

html js css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

</pre><pre name="code" class="html">    这几天做一个app涉及到仿QQ的左滑，通过查资料，看博文，终于站在巨人的肩膀上用js实现了。该文实现了只能有一条记录的左滑，简单实用，在这里与大家共享，代码还有很多不足和要改进的地方，望各位提出来，我们不断改进，一起进步！

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>左划出现删除按钮，右滑隐藏</title>
        <script type="text/javascript" src="jquery-1.8.3.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());

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

                // 用于记录被按下的对象
                var pressedObj;
                //定义一个用于存储滑动过的对象的数组
                var pressedObj1=[];

                // 用于记录按下的点
                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) {
                        var diffX = e.changedTouches[0].pageX - lastXForMobile;
                        if (diffX < -100) {
                            for(var i = 0; i < pressedObj1.length; ++i){
                                $(pressedObj1[i]).animate({marginLeft:"0"}, 500);
                                //清空数组
                                if(i==(pressedObj1.length-1)){
                                    pressedObj1=[];
                                }
                            }
                            $(pressedObj).animate({marginLeft : "-132px"}, 500);// 左滑
                            pressedObj1.push(this); 
                            //记录被滑的这个对象，已被下一次滑动删除这个对象的左移效果
                        } else if (diffX > 100) {
                            $(pressedObj).animate({marginLeft : "0"}, 500);// 右滑
                        }
                    });
                }

                // 网页在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) {
                        var diffX = e.clientX - lastX;
                        if (diffX < -150) {
                            for (var i = 0; i < len; ++i) {
                                var pressedObj111 = lines[i];
                                $(pressedObj111).animate({
                                    marginLeft : "0"
                                }, 100);
                                if(i==(pressedObj1.length-1)){
                                    pressedObj1=[];
                                }
                            }
                            $(pressedObj).animate({
                                marginLeft : "-101px"
                            }, 500);
                            // 左滑
                        } else if (diffX > 150) {
                            $(pressedObj).animate({
                                marginLeft : "0"
                            }, 500);
                            // 右滑
                        }
                    });
                }
            });
        </script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .line-wrapper {
                width: 100%;
                overflow: hidden;
                font-size: 1.3em;
                border-bottom: 1px solid #aaa;
                padding-top: 0.3em;
                padding-bottom: 0.3em;
            }
            .line-scroll-wrapper {
                white-space: nowrap;
            }
            .line-btn-delete {
                float: left;
                width: 2em;
                font-size: 0.8em;
                padding-top: 0.3em;
                padding-bottom: 0.3em;
            }
            .line-normal-wrapper {
                display: inline-block;
                float: left;
            }

        </style>
    </head>
    <body>
        
        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                    
                                                                    轻松的方式符合us
                    
                </div>
                <div class="line-btn-delete">
                                                            删除123
                </div>
            </div>
        </div>
        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                    
                        轻松的方式符合us
                    
                </div>
                <div class="line-btn-delete">
                    删除
                </div>
            </div>
        </div>
        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                    
                        轻松的方式符合us个我
                    
                </div>
                <div class="line-btn-delete">
                    删除
                </div>
            </div>
        </div>
        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                    
                                                        轻松的方式符合u
                   
                </div>
                <div class="line-btn-delete">
                    删除
                </div>
            </div>
        </div>

        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                    
                        轻松的方式
                    
                </div>
                <div class="line-btn-delete">
                    删除
                </div>
            </div>
        </div>
        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                  
                        轻松的方式
                    
                </div>
                <div class="line-btn-delete">
                    删除
                </div>
            </div>
        </div>
        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                   
                        轻松的方式符
                   
                </div>
                <div class="line-btn-delete">
                    删除
                </div>
            </div>
        </div>
        <div class="line-wrapper">
            <div class="line-scroll-wrapper">
                <div class="line-normal-wrapper">
                   
                        轻松的方式符合
                   
                </div>
                <div class="line-btn-delete">
                    删除
                </div>
            </div>
        </div>
    </body>
</html>

yuankeyan2012

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿QQ左滑出现删除，只能有一条记录显示有左滑js实现

用js代码实现仿QQ左滑删除的功能。我这2天正好做到这块，查阅资料，并在基础上改进，简化出一个非常简单的版本，在这里与各位共享。代码还有很多需要改进和不足，望各位予以指出。共同进步！
复制链接

扫一扫