HTML5+JS+CSS简单的实现左滑出现删除菜单，类似微信删除聊天框，代码完整

HTML5+JS+CSS简单的实现左滑出现删除菜单，类似微信删除聊天框，代码完整

1、HTML部分，我在此处写了两个商品卡片，用来操作

<div class="lame-card-list-tb lame-mt-2">
        <div style="display: flex;">
            <div class="right_menu lame-card-item lame-flex lame-ai-center lame-jc-between">
                <div class="left lame-flex lame-ai-center">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1220403926,908266914&fm=111&gp=0.jpg" alt="">
                </div>
                <div class="right lame-flex lame-flex-column">
                    <span class="right_title only-two-line">【原封正品】2020新款Apple/苹果 11英寸iPad Pro全面屏平板电脑便携式商务办公学生教育电脑支持面容ID</span>
                    <span class="right_desc only-two-line">面容ID解锁 Liquid视网膜显示屏 A12Z芯片</span>
                    <span class="right_size">256G</span>
                    <div class="right_tag_list">
                        <span class="tag_item">APPLE</span>
                        <span class="tag_item">旗舰店</span>
                        <span class="tag_item">正品保障</span>
                        <span class="tag_item">极速发货</span>
                        <span class="tag_item">顺丰包邮</span>
                    </div>
                    <div class="right_content lame-flex lame-ai-end">
                        <div class="content_price">
                            <span class="price_unit">¥</span>
                            <span class="price_num">9899.99</span>
                        </div>
                        <div class="content_sale">
                            <span>9999件已售</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-menu">
                收藏
            </div>
        </div>
        <div style="display: flex;">
            <div class="right_menu lame-card-item lame-flex lame-ai-center lame-jc-between">
                <div class="left lame-flex lame-ai-center">
                    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1220403926,908266914&fm=111&gp=0.jpg" alt="">
                </div>
                <div class="right lame-flex lame-flex-column">
                    <span class="right_title only-two-line">【原封正品】2020新款Apple/苹果 11英寸iPad Pro全面屏平板电脑便携式商务办公学生教育电脑支持面容ID</span>
                    <span class="right_desc only-two-line">面容ID解锁 Liquid视网膜显示屏 A12Z芯片</span>
                    <span class="right_size">256G</span>
                    <div class="right_tag_list">
                        <span class="tag_item">APPLE</span>
                        <span class="tag_item">旗舰店</span>
                        <span class="tag_item">正品保障</span>
                        <span class="tag_item">极速发货</span>
                        <span class="tag_item">顺丰包邮</span>
                    </div>
                    <div class="right_content lame-flex lame-ai-end">
                        <div class="content_price">
                            <span class="price_unit">¥</span>
                            <span class="price_num">9899.99</span>
                        </div>
                        <div class="content_sale">
                            <span>9999件已售</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide-menu">
                收藏
            </div>
        </div>
    </div>

2、JS部分（引入js，并通过 屏幕 触摸事件来实现）

主要是通过触摸开始和触摸结束的 “差” ，来判断我们 滑动的方向，代码如下：

 // 滑动出现菜单-------------------------------------------------------------
    // 开始触碰
    $(".right_menu").on("touchstart", function (e) {
        e.preventDefault();
        startX = e.originalEvent.changedTouches[0].pageX;
    });
    // 结束触碰
    $(".right_menu").on("touchmove", function (e) {
        e.preventDefault();
        moveEndX = e.originalEvent.changedTouches[0].pageX,
            X = moveEndX - startX;
        // 通过开始和结束的差判断是左滑还是右滑
        if (X > 0) {
            $(this).css('margin-left', '0');
            $('.slide-menu').css('display', 'none');
        } else if (X < 0) {
            $(".right_menu").css('margin-left', '0');
            $(this).css('margin-left', '-90px');
            $('.slide-menu').css('display', 'none');
            $(this).next('.slide-menu').css('display', 'flex');
        }
    });
    // 滑动出现菜单-------------------------------------------------------------

3、css部分（此处我简单的做了下样式，仅供参考，可根据自己需求进行修改）代码如下：

   body {
        margin: 0;
    }

    .lame-card-list-tb .right_menu {
        transition: .5s;
    }

    .lame-card-list-tb .slide-menu {
        background-color: red;
        color: #fff;
        margin-right: -5.625rem;
        width: 5.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
        font-size: 0.875rem;
    }

    .lame-card-list-tb .lame-card-item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        width: 100%;
    }

    .lame-card-list-tb .lame-card-item .left {
        width: 30%;
        display: flex;
        justify-content: center;
    }

    .lame-card-list-tb .lame-card-item .left img {
        width: 90%;
    }

    .lame-card-list-tb .lame-card-item .right {
        flex: 1;
    }

    .lame-card-list-tb .lame-card-item .right div,
    .lame-card-list-tb .lame-card-item .right span {
        margin-bottom: 5px;
    }

    .lame-card-list-tb .lame-card-item .right .right_title {
        color: #333;
        font-size: 0.875rem;
        font-weight: bold;
    }

    .lame-card-list-tb .lame-card-item .right .right_desc {
        color: #999;
        font-size: 0.75rem;
    }

    .lame-card-list-tb .lame-card-item .right .right_size {
        color: #999;
        font-size: 0.75rem;
    }

    .lame-card-list-tb .lame-card-item .right .right_tag_list .tag_item {
        font-size: 0.75rem;
        color: #FF5E28;
        border: 1px solid #FF5E28;
        padding: 0 0.3125rem;
        border-radius: 0.25rem;
    }

    .lame-card-list-tb .lame-card-item .right .right_content .content_price {
        color: #FF5E28;
    }

    .lame-card-list-tb .lame-card-item .right .right_content .content_price .price_unit {
        font-size: 0.75rem;
    }

    .lame-card-list-tb .lame-card-item .right .right_content .content_price .price_num {
        font-size: 1rem;
    }

    .lame-card-list-tb .lame-card-item .right .right_content .content_sale {
        color: #999;
        font-size: 0.75rem;
        margin-left: 0.3125rem;
    }

这样就完成了，如果大家有更好的方法或需要改进的地方欢迎交流学习。

本文地址：https://blog.csdn.net/weixin_44191920/article/details/112284135