微信小程序侧滑删除（左滑删除）

// pages/leftSwiperDel/index.js 
 
var initdata = function (that) { 
 var list = that.data.list 
 for (var i = 0; i  0) {//移动距离大于0，文本层left值等于手指移动距离 
    txtStyle = "left:-" + disX + "px"; 
    if (disX >= delBtnWidth) { 
     //控制手指移动距离最大值为删除按钮的宽度 
     txtStyle = "left:-" + delBtnWidth + "px"; 
    } 
   } 
   //获取手指触摸的是哪一项 
   var index = e.target.dataset.index; 
   var list = this.data.list; 
   list[index].txtStyle = txtStyle; 
   //更新列表的状态 
   this.setData({ 
    list: list 
   }); 
  } 
 }, 
 
 touchE: function (e) { 
  if (e.changedTouches.length == 1) { 
   //手指移动结束后水平位置 
   var endX = e.changedTouches[0].clientX; 
   //触摸开始与结束，手指移动的距离 
   var disX = this.data.startX - endX; 
   var delBtnWidth = this.data.delBtnWidth; 
   //如果距离小于删除按钮的1/2，不显示删除按钮 
   var txtStyle = disX > delBtnWidth / 2 &＃63; "left:-" + delBtnWidth + "px" : "left:0px"; 
   //获取手指触摸的是哪一项 
   var index = e.target.dataset.index; 
   var list = this.data.list; 
   list[index].txtStyle = txtStyle; 
   //更新列表的状态 
   this.setData({ 
    list: list 
   }); 
  } 
 }, 
 //获取元素自适应后的实际宽度 
 getEleWidth: function (w) { 
  var real = 0; 
  try { 
   var res = wx.getSystemInfoSync().windowWidth; 
   var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应 
   // console.log(scale); 
   real = Math.floor(res / scale); 
   return real; 
  } catch (e) { 
   return false; 
   // Do something when catch error 
  } 
 }, 
 initEleWidth: function () { 
  var delBtnWidth = this.getEleWidth(this.data.delBtnWidth); 
  this.setData({ 
   delBtnWidth: delBtnWidth 
  }); 
 }, 
 //点击删除按钮事件 
 delItem: function (e) { 
  var that = this 
  wx.showModal({ 
   title: '提示', 
   content: '是否删除？', 
   success: function (res) { 
    if (res.confirm) { 
     //获取列表中要删除项的下标 
     var index = e.target.dataset.index; 
     var list = that.data.list; 
     //移除列表中下标为index的项 
     list.splice(index, 1); 
     //更新列表的状态 
     that.setData({ 
      list: list 
     }); 
    } else { 
     initdata(that) 
    } 
   } 
  }) 
 
 } 
 
}) 

/* pages/leftSwiperDel/index.wxss */ 
view{ 
  box-sizing: border-box; 
} 
.item-box{ 
  width: 700rpx; 
  margin: 0 auto; 
  padding:40rpx 0; 
} 
.items{ 
  width: 100%; 
} 
.item{ 
  position: relative; 
  border-top: 2rpx solid #eee; 
  height: 120rpx; 
  line-height: 120rpx; 
  overflow: hidden; 
} 
.item:last-child{ 
  border-bottom: 2rpx solid #eee; 
} 
.inner{ 
  position: absolute; 
  top:0; 
} 
.inner.txt{ 
  background-color: #fff; 
  width: 100%; 
  z-index: 5; 
  padding:0 10rpx; 
  transition: left 0.2s ease-in-out; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
} 
.inner.del{ 
  background-color: #e64340; 
  width: 180rpx;text-align: center; 
  z-index: 4; 
  right: 0; 
  color: #fff 
} 
.item-icon{ 
  width: 64rpx; 
  vertical-align: middle; 
  margin-right: 16rpx 
} 
.thumb{ 
  width: 200px; 
  height: 200px; 
  -webkit-overflow-scrolling: touch; 
  overflow: scroll; 
} 

 
  
   
    
   {{index}}{{item.txt}} 
   删除