小程序實現左滑刪除功能

<!-- 外層包裹視圖 -->
<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)
 }
})