今天项目需求需要实现一个类似于微信右滑显示额外选项的功能，记录一下实现思路。
一.搭建简易的页面
对应的代码，界面使用了tailwindCSS，代码非常简单，就是普通的定位，关键的定位已经用黄色框框圈出。right的值为div删除的宽度，其它的样式这里不再过多赘述。
二.前置条件
这里先来梳理一下思路。
- 首先，我们需要给这删除按钮组件打上
ref，因为之后我们需要用到这个div的实例。(wrapper的ref是只是为了优化代码，我们暂时不需要) - 这里我们需要用到
TouchEvent这个事件，我们在浏览器开发者工具测试时，需要调节自适应到手机的模式才可以看到效果。
我们把@touchstart和@touchend这两个原生事件绑定到和朋友这个div身上。这里不要迷惑，这两个事件和@click事件一样，是js原生的事件。并不是我们自己自定义的事件，当检测到用户在屏幕上按下=时，会自动传递$event到相对于的函数参数中。
三.设计touchstart函数
在此之前，我想解释一下我的NOTE:为什么要写考虑用户只用了一根手指的情况呢？
首先让我们打印一下传递过来的event事件对象有哪些属性。
在这里最关键的属性就是这个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的解释。
