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;
    }

這樣就完成了，如果大家有更好的方法或需要改進的地方歡迎交流學習，