h5购物车列表实现商品左滑删除-526互联

<html lang="en">
<head>
    <meta charSet="UTF-8">
    <title>Title</title>
    <style>
        .cart-list {
            padding: 4px;
        }

        .cart-item {
            position: relative;
            width: 100%;
            margin-top: 30px;
        }

        .product-info {
            display: flex;
            border: 1px solid red;
            background-color: cadetblue;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        .del-card {
            border: 1px solid green;
            border-radius: 10px;
            align-items: center;
            text-align: center;
            width: 70px;
            height: 88px;

            position: absolute;
            right: 0;
            top: 0;
            background-color: #ff6700;
            color: #ffffff;
            flex-direction: column;
            justify-content: center;
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.3s;
        }

        .show-del-card {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="cart-list">
    <div class="cart-item">
        <div class="product-info">
            <div>
                <img src="GY32K73UWDWMT-7.jpg" alt="" style="max-height: 80px">
            </div>
            <div>
                <h3>
                    得力(deli)A4书写板夹 金属强色写板夹 金属强力夹塑料文件夹 多功能写字垫板 办公用品64502灰色
                </h3>
                <span>¥</span>7.5
            </div>
        </div>
        <div class="del-card">
            Delete
        </div>
    </div>
    <div class="cart-item">
        <div class="product-info">
            <div>
                <img src="GY32K73UWDWMT-7.jpg" alt="" style="max-height: 80px">
            </div>
            <div>
                <h3>
                    得力(deli)A4书写板夹 金属强色写板夹 金属强力夹塑料文件夹 多功能写字垫板 办公用品64502灰色
                </h3>
                <span>¥</span>7.5
            </div>
        </div>
        <div class="del-card">
            Delete
        </div>
    </div>
</div>
<script>
    let cartItems = document.querySelectorAll('.cart-item');
    let startX;
    let endX;
    cartItems.forEach(item => {
        item.addEventListener('touchstart', handleTouchStart, false);
        item.addEventListener('touchmove', handleTouchMove, false);
        item.addEventListener('touchend', handleTouchEnd, false);
    });

    function handleTouchStart(event) {
        startX = event.changedTouches[0].clientX;
        console.log("start", startX);
    }

    function handleTouchMove(event) {
    }

    function handleTouchEnd(event) {
        endX = event.changedTouches[0].clientX;
        console.log("end", endX);
        //查找当前对象所对应的product-info对象
        const productInfo = event.currentTarget.querySelector('.product-info');
        const delCard = event.currentTarget.querySelector('.del-card');

        if (endX < startX) {
            productInfo.style.transform = 'translateX(-70px)';
            delCard.classList.add('show-del-card');
        } else if (endX > startX) {
            productInfo.style.transform = 'translateX(0)';
            delCard.classList.remove('show-del-card');
        }
    }

    // 给class为del-card的元素绑定点击事件
    document.querySelector('.del-card').addEventListener('click', function () {
        alert("删除");
    })
</script>
</body>
</html>
View Code
购物车
商品