滑动删除 · PHP/Python/前端/Linux 等等学习笔记

[TOC] ## 滑动删除操作 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> .list-container { width: 100%; max-width: 500px; margin: 0 auto; } .list-item { position: relative; display: flex; align-items: center; padding: 15px; background: #fff; border-bottom: 1px solid #eee; touch-action: pan-y pinch-zoom; overflow: hidden; transition: transform 0.3s ease } .item-content { width: 100%; transition: transform 0.3s ease; } .delete-btn { position: absolute; right: -80px; top: 0; bottom: 0; width: 80px; background: #ff4444; color: wheat; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateX(0); } </style> <div class="list-container"> <div class="list-item"> <div class="item-content">列表项 11231231231313</div> <div class="delete-btn"> <p>删除</p> </div> </div> <div class="list-item"> <div class="item-content">列表项 11231231231313</div> <div class="delete-btn">删除</div> </div> <div class="list-item"> <div class="item-content">列表项 11231231231313</div> <div class="delete-btn">删除</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const items = document.querySelectorAll('.list-item'); items.forEach(item => { let startX = 0; let currentX = 0; let isDragging = false; item.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; isDragging = true; // 关闭其他打开的列表项 items.forEach(otherItem => { if (otherItem !== item) { otherItem.querySelector('.item-content').style.transform = 'translateX(0)'; otherItem.querySelector('.delete-btn').style.transform = 'translateX(0)'; } }); }); item.addEventListener('touchmove', (e) => { if (!isDragging) return; currentX = e.touches[0].clientX - startX; console.log(currentX) // 限制只能向左滑动,最大滑动距离80px if (Math.abs(currentX) < 80) { item.querySelector('.item-content').style.transform = `translateX(${currentX}px)`; item.querySelector('.delete-btn').style.transform = `translateX(${currentX}px)`; // 根据滑动进度设置透明度 }else if(currentX<0 && Math.abs(currentX) > 80 && Math.abs(currentX) <400){ item.querySelector('.item-content').style.transform = `translateX(${currentX}px)`; item.querySelector('.delete-btn').style.transform = `translateX(${currentX}px)`; // 根据滑动进度设置透明度 setTimeout(() => { item.querySelector('.item-content').style.transform = `translateX(-80px)`; item.querySelector('.delete-btn').style.transform = `translateX(-80px)`; // 根据滑动进度设置透明度 }, 100); } }); item.addEventListener('touchend', () => { isDragging = false; // 如果滑动距离超过40px,则完全展开删除按钮 if (currentX < -40) { item.querySelector('.item-content').style.transform = 'translateX(-80px)'; item.querySelector('.delete-btn').style.transform = `translateX(-80px)`; } else { item.querySelector('.item-content').style.transform = 'translateX(0)'; item.querySelector('.delete-btn').style.transform = `translateX(0)`; } }); // 修改删除按钮的点击事件处理 item.querySelector('.delete-btn').addEventListener('click', (e) => { console.log("删除") e.stopPropagation(); e.preventDefault(); item.remove(); // 先将内容恢复原位 // item.querySelector('.item-content').style.transform = 'translateX(0)'; // // 等待位置恢复动画完成后再执行删除动画 // setTimeout(() => { // item.style.height = '0'; // item.style.padding = '0'; // // 完全删除元素 // setTimeout(() => item.remove(), 300); // }, 300); }); item.addEventListener("click",(e)=>{ item.querySelector('.item-content').style.transform = 'translateX(0)'; item.querySelector('.delete-btn').style.transform = `translateX(0)`; }) }); }); </script> </body> </html> ``` ![](https://img.kancloud.cn/64/0e/640ec55f586facb8cc6e5e62ac9b73eb_410x219.png)