移动端左右滑动出现和隐藏按钮（适合vue和小程序开发）

在日常开发中，会碰到许许多多的样式布局，有时候用ui框架并不是特别的符合项目的需求，所以有的时候还是要自己亲自动手来写，这是一个简单的，左右滑动可以显示和隐藏删除按钮的一个小demo，大家可以相互学习学习，如果哪里表达的不太好，欢迎大家来指正，或者有更好的实现方法也可以评论，希望大佬们多多提意见。

首先来看一下效果图

首先先和大家说一下我的思路，最后把代码放到后边供大家参考

第一：首先我们先想一下应该怎样布局，肯定这个删除按钮是存在的，然后用户从右向左滑动的时候我们把它显示出来，然后从左向右滑动的时候我们在把这个删除按钮给隐藏掉。

这个时候我们可以这样去想，比如最外边的盒子来一个li，然后给这个li设置一个100%的宽度，然后li里面放一个盒子起一个类名比如叫.libox，这个libox的宽度给它设置成120%（当然这里写都成vw的单位也是可以的）。然后给li添加overflow：hidden，我们可以在libox中使用flex布局，分成3部分，左边的商品信息，中间的步进器，和右边的删除按钮，当然在这里第一部分和第二部分要站100%的宽度，自然右侧的删除按钮就显示不出来了。然后给这个libox盒子添加一个相对定位，然后只需控制libox的left属性为0和-20%即可。当然可以加一点过渡效果transition，不过加了过渡最好使用transform来移动libox。

第二：基本样式做好以后，我们再考虑一下怎样能让它滑动起来。

这里告诉大家两个移动端的事件

ontouchstart // 手指按下时触发
ontouchmove  // 手指在屏幕上移动时触发

我们知道这两个事件以后就简单了，大家可以这样想，我们在ontouchstart事件中拿到当前手指触碰的x轴上的位置，然后滑动的时候我们在ontouchmove事件中拿到用户滑动以后x轴上的位置，然后用ontouchstart中x轴上的位置减去ontouchmove中x轴上的位置，比如他们两个之差大于20，则我就控制li