微信小程序 实现列表项滑动显示删除按钮的功能

<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>  </view> </view></view>

@import "../common/weui.wxss"; .container { box-sizing: border-box; padding: 0 0 0 0;}   .record { display: flex; flex-direction: row; align-items: center; width:100%;  height: 120rpx; position: absolute; justify-content: space-between; background-color: #fff;} .record .right{ margin-right: 30rpx;   color: #888888;}.record .left{ margin-left: 30rpx;  display: flex;  flex-direction: column; justify-content: space-between;} .record .left .summary{  color: #aaa; font-size: 30rpx; line-height: 30rpx; } .record-box{ height: 120rpx; width: 100%; border-bottom: 1rpx solid #ddd; background-color: #fff;} .delete-box{ background-color: #e64340; color: #ffffff; float: right; height: 100%; width: 80px; display: flex; align-items: center; justify-content: center;} .record-box:last-child { border-bottom: 0;} .record .r-item {  }　　

var detailList = [  { datetime: '2017-01-01 17:00', count: 100, unit: 'ml', type: '开水', remark: '哈哈哈哈' },  { datetime: '2017-01-01 17:01', count: 100, unit: 'ml', type: '开水' },  { datetime: '2017-01-01 17:02', count: 100, unit: 'ml', type: '开水' }];var recordStartX = 0;var currentOffsetX = 0;Page(  {    data: {      detailList: detailList    }    ,    recordStart: function (e) {      recordStartX = e.touches[0].clientX;      currentOffsetX = this.data.detailList[0].offsetX;      console.log('start x ', recordStartX);    }    ,    recordMove: function (e) {      var detailList = this.data.detailList;      var item = detailList[0];      var x = e.touches[0].clientX;      var mx = recordStartX - x;      console.log('move x ', mx);      var result = currentOffsetX - mx;      if (result >= -80 && result <= 0) {        item.offsetX = result;      }      this.setData({        detailList: detailList      });    }    ,    recordEnd: function (e) {      var detailList = this.data.detailList;      var item = detailList[0];      console.log('end x ', item.offsetX);      if (item.offsetX < -40) {        item.offsetX = -80;      } else {        item.offsetX = 0;      }      this.setData({        detailList: detailList      });    }  });