微信小程序movable-view实现左滑删除功能

前言

微信小程序官方没有自带的左滑删除功能，通常开发的时候都是使用touch事件来开发自定义的左滑删除，处理起来会有点麻烦。微信小程序出了movable-view(点击查看官方文档)以后，咱们就能够使用movable-view来开发左滑删除功能了。

源码

Talk is cheap. Show me the code.

实现原理

1. 左滑的元素高度须要是固定的，由于movable-view要求必须设置width和height；
2. 删除的按钮固定在右侧，设置必定的宽度；
3. movable-area宽度设置为100vw-删除按钮宽度，movable-view宽度设置为100vw；
4. 根据movable-view的x属性来控制元素滑动，为了不滑动到一半只显示部分按钮，能够设置滑动小于一半再也不滑动时回复到初始位置，超过一半则继续滑动到底。
5. 一直拖动movable-view时会出现只触发touch事件的状况，因此须要针对touchstart和touchend事件进行特殊状况处理。

效果图

• 左滑

• 删除