小程序实现左滑删除功能

<!-- 外层包裹视图 --><view class="cont"> <!-- 列表 --> <view wx:for="{{list}}" wx:key="index" class="list"> <!-- 滑动删除 --> <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.shows}}" class="list_del txt">  <!-- 列表图片 -->  <image class="list_img" mode="widthFix" src="{{item.image}}"></image>  <!-- 列表名称 -->  <text class='list_name'>{{item.name}}</text>  <!-- 列表标题 -->  <label class='list_title'>{{item.title}}</label>  <!-- 活动时间 -->  <text class='list_datas'>活动时间:{{item.datas}}</text> </view> <!-- 删除 --> <view data-index="{{index}}" bindtap="delItem" class="list_del del">删除</view> </view></view>

/* 父级 */page{ background-color: #f5f5f5;} /* 外层视图 */.cont{  width: 100%;  margin: 0 auto; }  .list{  position: relative;  height: 170rpx; margin: 20rpx; border-radius: 10rpx; line-height: 170rpx;  overflow: hidden; } /* 删除外层包裹视图 */.list_del{  position: absolute;  top:0; } .list_del.txt{  position: relative; 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; } /* 删除 */.list_del.del{  background-color: #e64340;  width: 180rpx;text-align: center;  z-index: 4;  right: 0;  color: #fff } /* 列表图片 */.list_img{  width: 105rpx;height: 105rpx;border-radius: 10rpx;vertical-align: middle; margin-left: 15rpx;margin-top: -8rpx;}   /* 列表名称 */.list_name{ position: absolute; left:168rpx; bottom:18rpx;}/* 列表标题 */.list_title{ position: absolute; right:155rpx; bottom:18rpx;  font-size: 13px; color: #818181;}/* 活动时间 */.list_datas{ position: absolute; left:168rpx; top:35rpx;  font-size: 13px; color: #818181;}

// 默认声明一个函数记录list显示的数据---删除状态var initdata = function(that) { var list = that.data.list for (var i = 0; i < list.length; i++) { list[i].shows = "" } that.setData({ list: list })}var app = new getApp();Page({ data: { delBtnWidth: 185, //删除按钮宽度单位（rpx）  // 列表数据 list: [{  // 删除状态  shows: "",  // 列表中图片  image: "../../image/list_img.png",  // 昵称  name: "菜鸟老五",  // 简介title  title: "主办方：小米科技",  // 日期  datas: "2017.02.21"  },  {  shows: "",  image: "../../image/list_img.png",  name: "菜鸟老五",  title: "主办方：小米科技",  datas: "2017.02.21"  },  {  shows: "",  image: "../../image/list_img.png",  name: "菜鸟老五",  title: "主办方：小科技",  datas: "2017.02.21"  },  {  shows: "",  image: "../../image/list_img.png",  name: "菜鸟老五",  title: "主办方：小米科技",  datas: "2017.02.21"  },  {  shows: "",  image: "../../image/list_img.png",  name: "菜鸟老五",  title: "主办方：小米科技",  datas: "2017.02.21"  },  ],  },  onLoad: function(options) { this.initEleWidth(); },  // 开始滑动事件 touchS: function(e) { if (e.touches.length == 1) {  this.setData({  //设置触摸起始点水平方向位置   startX: e.touches[0].clientX  }); } }, touchM: function(e) { var that = this; initdata(that) if (e.touches.length == 1) {  //手指移动时水平方向位置   var moveX = e.touches[0].clientX;  //手指起始点位置与移动期间的差值   var disX = this.data.startX - moveX;  var delBtnWidth = this.data.delBtnWidth;  // var txtStyle = "";  if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变   // txtStyle = "left:0px";  } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离   // txtStyle = "left:-" + disX + "px";  if (disX >= delBtnWidth) {   //控制手指移动距离最大值为删除按钮的宽度    // txtStyle = "left:-" + delBtnWidth + "px";  }  }  } }, // 滑动中事件 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 = "";  txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";   //获取手指触摸的是哪一项   var index = e.target.dataset.index;  var list = this.data.list;  list[index].shows = txtStyle;  console.log("1", list[index].shows);  //更新列表的状态   this.setData({  list: list  }); } else {  console.log("2"); } }, //获取元素自适应后的实际宽度  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; // 打印出当前选中的index console.log(e.currentTarget.dataset.index); // 获取到列表数据 var list = that.data.list; // 删除 list.splice(e.currentTarget.dataset.index, 1); // 重新渲染 that.setData({  list: list }) initdata(that) }})