作者: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>
|