258资源分享网

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

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

wxml：

<view class="container">

<view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">

<view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">

<view class="left">

<view>{{record.type}} {{record.count+record.unit}}</view>

<view class="summary">{{record.remark}}</view>

</view>

<view class="right">

{{record.datetime}}

</view>

</view>

<view class="delete-box">

<view>删除</view>