在移动端写一个左滑删除的功能

在移动端实现左滑删除的功能通常涉及到触摸事件的处理和动画效果。以下是一个简单的示例，使用原生JavaScript和CSS来创建一个左滑删除的项目列表。

HTML 结构

首先，定义HTML结构，其中包含一个列表，每个列表项都可以左滑删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左滑删除</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul id="itemList">
        <li class="item">
            <div class="content">项目 1</div>
            <button class="deleteBtn">删除</button>
        </li>
        <li class="item">
            <div class="content">项目 2</div>
            <button class="deleteBtn">删除</button>
        </li>
        <!-- 更多项目 -->
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

然后，添加一些CSS样式来美化列表和删除按钮，并设置初始状态。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.content {
    flex: 1;
}

.deleteBtn {
    width: 100px;
    height: 100%;
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    display: none; /* 初始隐藏删除按钮 */
}

JavaScript 逻辑

最后，使用JavaScript来处理触摸事件，实现左滑显示删除按钮的功能。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('.item');
    let startX = 0;
    let currentX = 0;
    let threshold = 50; // 阈值，超过这个值才认为是滑动操作
    let itemBeingDragged = null;

    function handleTouchStart(e) {
        startX = e.touches[0].clientX;
        itemBeingDragged = this;
    }

    function handleTouchMove(e) {
        if (!itemBeingDragged) return;
        currentX = e.touches[0].clientX;
        let translateX = startX - currentX;
        if (translateX > 0) { // 只允许左滑
            itemBeingDragged.style.transform = `translateX(${translateX}px)`;
        }
    }

    function handleTouchEnd(e) {
        if (!itemBeingDragged) return;
        let translateX = startX - currentX;
        if (translateX > threshold) {
            // 显示删除按钮，并固定位置
            itemBeingDragged.style.transform = `translateX(${threshold}px)`;
            itemBeingDragged.querySelector('.deleteBtn').style.display = 'block';
        } else {
            // 重置位置和隐藏删除按钮
            resetItem(itemBeingDragged);
        }
        itemBeingDragged = null; // 重置当前拖拽的项目
    }

    function resetItem(item) {
        item.style.transform = 'translateX(0)';
        item.querySelector('.deleteBtn').style.display = 'none';
    }

    items.forEach(item => {
        item.addEventListener('touchstart', handleTouchStart);
        item.addEventListener('touchmove', handleTouchMove, { passive: false }); // passive: false 以允许调用 preventDefault()
        item.addEventListener('touchend', handleTouchEnd);
        item.addEventListener('touchcancel', () => resetItem(itemBeingDragged)); // 处理触摸中断的情况，如来电等
    });
});