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

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

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

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

wxml：

<view> <view data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record"> <view bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd"> <view> <view>{{record.type}} {{record.count+record.unit}}</view> <view>{{record.remark}}</view> </view> <view> {{record.datetime}} </view> </view> <view> <view>删除</view> </view> </view> </view>

　wxss：

@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 { } 　　

JS代码：

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 }); } } );