微信小程序之利用微信api触摸滑动事件制作购物车滑动删除功能

微信开发文档事件讲解-触摸事件点击这里
先上效果图：

向左滑动显示删除按钮》在这里唯一不好理解的是如何向左滑动让他显示删除按钮并且做到删除功能。
首先我们看微信开发文档其中：我们要用到的三种事件如下图所示：
一个是手指触摸开始，一个是触摸移动，一个是触摸结束。因此我们能拿到二个值即：开始的位置的值->移动的值。当我们触摸结束不就是向左向右滑动结束的动作嘛。看如下代码：我们在data中定义二个初始值：
startX为滑动开始的位置,endX为滑动的距离，那么此时有小伙伴会迷惑，那我们滑动结束的值呢，在这里我们滑动结束是不是要做让这一列向左移动这个动作呢？所以在这不需要滑动结束的值，我们只需要第一次触摸屏幕到你滑动的距离的值即可。
定义三个事件：
分别是触摸开始-触摸滑动距离-触摸滑动结束三个事件。如下图所示：

我们把二个值存入data中。
接下来我们还需要想我们拿到距离之后还要做什么操作？当然是让它向左滑动了，那么问题又来了，怎么让它向左滑动呢？因此我们还需要了解到一个知识点微信小程序之动画
看不太懂的话就去百度搜索呦在这里我为大家放置一篇大佬写的文章微信小程序之动画详解
详细的我就不做详解了，那么我们开始了：
1.先创建一个动画实例：

在这里我们需要用到如下值：分别是动画持续时间和动画效果

方法呢：我们用到translateX方法，文档说的很清楚 让元素在x轴平移

此时我们需要的东西全部了解完毕，开始写代码了：

我们购物车里每条数据都有他的index值，有人好奇animation="{{item.animationData}}"是干什么的
再这里我说一下，这个值是为了将动画准确导入给某个组件，这是此组件才会进行动画操作，因为我们数据是后台给的，所以我们购物车这些物品每条都要能进行滑动动画，所以给每个数据添加一个animationData属性用来存放动画。
看如下代码：



此时在data中CarList数组中的某条数据中就有了一个动画。当然我这么说是不太恰当，这条数据就是你手指滑动的这条数据，然后为它加了个动画，此时它就开始x轴平移-90，为什么是负值呢，因为这个删除按钮是定位到屏幕外的，因此这里需要负值把删除重新拉进到屏幕视野内。此时我们想要的效果就实现了，但是这样是有问题的，看如下问题：

我们发现，左滑动的时候可以实现滑动了，当然又划也可以实现返回功能，但是这么写很不好，主管会打死你的这么写，那么我么你想要什么效果呢，当我们不管滑动那个数据来进行删除，我们都得让其他数据全部返回初始位置，始终保留一条数据呈现删除效果。那么我们要怎么做呢，看下面代码就知道了。

封装如下函数，在每次滑动动画实现前把所有购物车商品行先回退到原始位置即可。当然我们也需要在滑动给data中数据赋值前调用。好了，到目前为止，效果已全部实现。我是小白（请大佬们带飞）