背景
产品想要实现购物车商品的左滑删除功能，坑爹的是我们这项目不允许引入组件库，不然随手一个weui。话不多说开撸。
最终效果
wxml
思路： 利用微信自带的组件movable-area以及movable-view在其中可以整体移动内容特性，将购物车item写在movable-view中，将删除按钮定位在右侧展示的位置，然后设置movable-view的宽度为width：100vw，层级高于删除按钮，将删除按钮遮住。movable-area的宽度为width: calc(100vw - 170rpx);170rpx为删除按钮的宽度，这样movable-view左滑就可以刚好将删除按钮显示出来。
wxss
思路：上面便是wxss中主要的核心代码，和wxml思路中所说的一致，然后goods-card的样式就正常写。
js
思路： js的核心便是这几个函数，wxml中movable-view的属性x="{{goodsItem.xMove}}"便是设置movable-view的移动位置。
setXmove函数的作用便是设置每个item的movable-view当前位置。
showDeleteButton为显示删除按钮设置当前位置为-85便是向左移动170rpx刚好为删除按钮的宽度。
hideDeleteButton为隐藏按钮设置为0。
handleMovableChange主要作用是判断当前change的事件属性，如果为friction则为惯性当返回的当前位置x小于-30则移动距离过半，显示按钮。反之隐藏按钮，这样做是为了左滑的平滑流畅。如果为out-of-bounds，超出移动范围都为隐藏按钮。
handleTouchStart是对其它当前左滑的item重置归位，当存储的index不等于当前点击的index则将位置置0，隐藏按钮。并且存储开始的startX。
handleTouchEnd为滑动结束事件，首先存储当前的点击index，如果目前滑动结束位置小于开始位置并且做差小于-30，则为滑动超过了按钮的一半宽度，显示按钮。如果当前位置大于开始位置并且做差小于30，则为右滑，但是没有超过按钮宽度一般，还是显示按钮。否则隐藏按钮。
总结
这便是小程序实现左滑删除的方法，有任何问题可以评论。代码结合了实际项目。
