js仿qq侧滑删除

基础概念

"仿QQ侧滑删除"是指在前端界面中实现类似QQ消息列表中的侧滑删除功能。用户可以通过向左或向右滑动某个列表项来显示删除按钮，从而进行删除操作。

类型

左滑删除：常见于大多数应用，滑动方向向左。
右滑删除：某些应用会选择向右滑动来显示删除选项。

应用场景

消息列表：如QQ、微信等社交应用中的消息列表。
待办事项：任务管理应用中的待办事项列表。
文件管理：文件或图片管理应用中的文件列表。

实现方法

以下是一个简单的JavaScript实现侧滑删除功能的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧滑删除示例</title>
    <style>
        .list-item {
            position: relative;
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            transition: transform 0.3s;
        }
        .list-item .content {
            padding: 15px;
        }
        .list-item .delete-btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 100px;
            height: 100%;
            background-color: red;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="list-item" id="item1">
        <div class="content">消息1</div>
        <div class="delete-btn">删除</div>
    </div>

    <script>
        const item = document.getElementById('item1');
        let startX = 0;
        let currentX = 0;

        item.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
        });

        item.addEventListener('touchmove', (e) => {
            currentX = e.touches[0].clientX;
            const diffX = currentX - startX;
            if (diffX < 0) {
                item.style.transform = `translateX(${Math.max(-100, diffX)}px)`;
            }
        });

        item.addEventListener('touchend', () => {
            if (currentX < startX - 50) {
                item.style.transform = 'translateX(-100px)';
            } else {
                item.style.transform = 'translateX(0)';
            }
        });

        document.querySelector('.delete-btn').addEventListener('click', () => {
            item.remove();
        });
    </script>
</body>
</html>