今天的项目需要实现一个类似微信右滑显示附加选项的功能，记录一下实现思路。1.搭建简单页面对应的代码，界面使用tailwindCSS，代码很简单，就是普通定位，关键定位已经用黄框圈出来了。right的值为div删除的宽度，其他样式这里不再赘述。2.前提条件这里，我们先梳理一下思路。首先，我们需要引用删除按钮组件，因为稍后我们需要使用这个div实例。（wrapper的ref只是为了优化代码，我们暂时不需要它。）这里我们需要使用TouchEvent事件。我们在浏览器开发者工具中测试时，需要将自适应模式调整到手机端才能看到效果。我们把@touchstart和@touchend这两个原生事件绑定到friends的div上。这里不要混淆，这两个事件和@click事件一样，都是原生的js事件。这不是我们自己的自定义事件。当检测到用户在屏幕上按下=时，$event会自动传递给相应的函数参数。3.设计touchstart功能在此之前，我想解释一下我的NOTE:为什么我要写考虑到用户只用一根手指？首先，让我们打印传递的事件对象具有哪些属性。这里最关键的属性是changedTouches属性，它的值是一个数组。我们先看看MDN是怎么解释这个属性的。有点抽象，对吧？让我解释一下这个废话试图传达什么。首先我们要明白为什么这个属性是数组。当我们的手指触摸到屏幕时，浏览器会捕捉到你此时触摸了多少根手指。我们可以根据这个值做出一些不同的判断。最简单的例子，假设数组changedTouches.length为1，表示我只用一根手指触摸屏幕，那么我可以判断if(changedTouches.length>0&&changedTOuches.length<2){TODO...}我可以根据用户触摸的手指数进行相应的手指操作。用过触摸板的都知道，两指、一指、三指等对应不同的事件。其实你可以理解为什么要把这个属性设计成一个数组。这里我们只考虑用户只用一根手指触摸屏幕进行滑动的情况。对应下面的代码，我们已经获取到了用户第一次触摸屏幕时的点，这里需要看一下这个touchPoint的属性。该对象最关键的属性是圈出的属性。补充clientX和clientY的附加技巧我们来看看MDN是怎么解释的。这里需要重点理解这句话，注意理解这个-->不管页面是否水平滚动（垂直滚动对应clientY）这里我们用图片来说话，其中红色箭头指向的是用户触摸时，我们得到那个点的坐标，黄色箭头所指的距离，就是clientX。clientY不用说了，就是这个距离tips：这里的距离是相对于左上角坐标(0,0)的，这是默认的设计规则pageX和pageY，虽然我们目前不用，但是让我们在这里展开。还是先看看MDN的解释。这里我们还是重点理解滚动这个词。因为这是与clientX的核心区别。由于我自己无法显示这个页面，所以我截取了一个MDN的页面作为示例。这是初始界面。这里可以看出我们的pageX和pageY和我们的clientX和clienY完全一样，因为起点是页面的左上角，页面还没有滚动。但是一旦我们向下滚动一定距离，假设我们向下滚动200px。这时候我们pageY的起点还是我们上一页的起点，而不仅仅是和上面红线的距离！也就是说实际的pageY等于红线距离+200px（因为我们还没有平移X轴，pageX还是原来的值）。如果了解clientY，其实可以知道pageY=clientY+200pxscreenX和screenY这两个属性此时在日常开发中基本用不到，所以这里简单介绍一下。如下图所示。当我的屏幕变大时：好的，我们已经知道了相关的前置知识。这里可以获取用户点击时clientX的值，作为标记。4.设计touchend函数先放总代码，后面我们会一步步讲解。首先，我们需要获取用户触摸的具体div。因为最终这就是它要滑动的东西。然后，和touchStart事件一样，当用户触摸并松开时，也会记录一个数据changedTouches的数组。很好理解，touchStartX-touchEndX不能获取用户滑动了多远吗？我们这里需要一个阈值，用来看用户这次是否真的要向左滑动调出删除按钮进行操作？用人类的话来说，也许用户只是轻轻点击了屏幕？所以这里需要简单的判断一下，用户的移动距离是否大于我们指定的阈值，如果大于，则判断用户进行了该操作，如果没有，则忽略滑动事件。判断和操作上面只是直接操作dom来实现功能。我们可以更优雅的解决这个移动问题，还需要读者带上自己的思考去实现。5.加上多余的动画，已经成功实现了~思考题：我的delBtnInitMoveDistance是指删除按钮一开始移动的距离。你能告诉我计算值是多少吗？为什么可以优化代码？Tips：关于clientWidth和offsetWidth的解释，我在上一篇博客中有详细的解释。
