原生JS实现列表右滑删除与收藏按钮教程

本文介绍如何使用原生JavaScript和DOM操作实现列表项右滑显示删除与收藏按钮的功能。通过监听触摸事件计算坐标位移，结合CSS动画完成交互效果，无需依赖第三方插件，适合希望理解底层原理的开发者参考。

前言

列表右滑动展示删除和收藏按钮的效果类似于微信或美团饿了么等应用中的列表交互，即用户右滑列表项时，会显示出特定的功能按钮。

原本计划讲解几年前支付宝的一道机试题，但由于记忆模糊且无法找到原题，因此改用当前案例进行说明。实际上，解题思路大体相同，作为程序员，掌握设计思路比单纯熟悉框架和API更为重要。

HTML结构

html部分


<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>支付宝前端机试题</title>
 <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
 <script src="js/index.js"></script>
</head>

<body>
 <h2 class="title">购物车</h2>
 <section class="shoppingList"></section>
</body>

</html>

JavaScript逻辑

JS部分


let initXY = [0,0];//记录移动的坐标
let isStop = false;//记录是否禁止滑动
let oldIndex = null;//记录旧的下标
let theIndex = null;//记录新的下标

function touchstart(event,index){
 if(event.touches.length > 1) {
  isStop = true;
  return;
 }
 oldIndex = theIndex;
 theIndex = null;
 initXY = [event.touches[0].pageX,event.touches[0].pageY];
 // console.log(initXY);
}

function touchmove(event,index){
 if(event.touches.length > 1) return;
 let moveX = event.touches[0].pageX - initXY[0];
 let moveY = event.touches[0].pageY - initXY[1];
 if(isStop || Math.abs(moveX) < 5) return;//如果禁止滑动或者滑动的距离小于5就返回
 if(Math.abs(moveY) > Math.abs(moveX)){
  isStop = true;
  return;
 }
 if(moveX<0){
  theIndex = index;
  isStop = true;
 }else if(theIndex && oldIndex === theIndex){
  oldIndex =index;
  theIndex = null;
  isStop = true;
  setTimeout(()=>{oldIndex=null;},150);//设置150毫秒延迟来凸显动画效果，实际不加也可以
 }
 // 这里用jq就不用循环了，但我懒得引，大家知道就好
 let goods = document.getElementsByClassName("goodsInfo");
 for(let i=0;i<goods.length;i++){
  theIndex === i ? goods[i].classList.add("open") : goods[i].classList.remove("open");
 };
 // console.log(moveX,moveY);
}

function touchend(){
 isStop = false;
}

总结

实现方式主要涉及判断触碰时的移动坐标并结合动画效果，有兴趣查看完整源代码的开发者可前往GitHub下载。

https://github.com/13632756286/Sliding-menu

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

原生JS实现列表右滑删除与收藏功能详解

前言

案例

HTML结构

JavaScript逻辑

总结

实用工具推荐