微信小程序列表项滑动显示删除按钮

作者：kklldog，来自原文地址 
微信小程序并没有提供列表控件，所以也没有iOS上惯用的列表项左滑删除的功能，SO只能自己干了。

原理很简单，用2个层，上面的层显示正常的内容，下面的层显示一个删除按钮，就是记录手指滑动的距离，动态的来移动上层元素，当然上层用绝对定位。

wxml：

1. <view class="container">
2. <view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">
3. <view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">
4. <view class="left">
5. <view>{{record.type}} {{record.count+record.unit}}</view>
6. <view class="summary">{{record.remark}}</view>
7. </view>
8. <view class="right">
9. {{record.datetime}}
10. </view>
11. </view>
12. <view class="delete-box">
13. <view>删除</view>