小程序的左滑删除功能的实现

我们先来看html部分代码：

<view class='addressBox' 
bindtap='addressTap' 
wx:for='{{list}}' 
bindtouchstart='touchS' 
bindtouchmove='touchM' 
bindtouchend='touchE' 
data-index='{{index}}' 
style="right:{{item.right}}rpx">

让我们再看一下微信官方的开发文档中bindtouch的这部分事件

1. 先要建立删除的按钮，设置好样式，然后大框设置样式把他隐藏起来overflow：hidden
   下面是删除的css代码：

.deleteClass{
  position: absolute;
  height: 168rpx;
  width: 80rpx;
  background-color: #ff7760;
  right: -90rpx;
  top: 0;
  border-radius: 8rpx;
}

2. 监控手指开始触摸的地方，和移动的距离，还有最后结束时的位置，接下来就是判断了
   以下是JS部分：

touchS: function (e) {
var touch = e.touches[0]

for (var index in this.data.list) {
var item = this.data.list[index]
item.right = 0
}
this.setData({
list: this.data.list,
startX: touch.clientX,
})
},
touchM: function (e) {
var touch = e.touches[0]
var item = this.data.list[e.currentTarget.dataset.index]
var disX = this.data.startX - touch.clientX

if (disX >= 20) {
if (disX > this.data.delBtnWidth) {
disX = this.data.delBtnWidth
}
item.right = disX
this.setData({
list: this.data.list
})
} else {
item.right = 0
this.setData({
list: this.data.list
})
}
},
touchE: function (e) {
var item = this.data.list[e.currentTarget.dataset.index]
if (item.right >= this.data.delBtnWidth / 2) {
item.right = this.data.delBtnWidth
this.setData({
list: this.data.list,
})
} else {
item.right = 0
this.setData({
list: this.data.list,
})
}
},

3.然后再data上面设置个数据：delBtnWidth：90，//你的删除模块的宽
4.记得设置data-index=‘{{index}}’判断是你列表的哪个
5.差不多也就这样了QAQ