效果图如下：
wxml代码：
1 <view class="container"> 2 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key=""> 3 <view class="content">{{item.content}}</view> 4 <view class="del" catchtap="del" data-index="{{index}}">删除</view> 5 </view> 6 </view>
wxss代码：
1 .touch-item { 2 font-size: 14px; 3 display: flex; 4 justify-content: space-between; 5 border-bottom:1px solid #ccc; 6 width: 100%; 7 overflow: hidden 8 } 9 .content { 10 width: 100%; 11 padding: 10px; 12 line-height: 22px; 13 margin-right:0; 14 -webkit-transition: all 0.4s; 15 transition: all 0.4s; 16 -webkit-transform: translateX(90px); 17 transform: translateX(90px); 18 margin-left: -90px 19 } 20 .del { 21 background-color: orangered; 22 width: 90px; 23 display: flex; 24 flex-direction: column; 25 align-items: center; 26 justify-content: center; 27 color: #fff; 28 -webkit-transform: translateX(90px); 29 transform: translateX(90px); 30 -webkit-transition: all 0.4s; 31 transition: all 0.4s; 32 } 33 .touch-move-active .content, 34 .touch-move-active .del { 35 -webkit-transform: translateX(0); 36 transform: translateX(0); 37 }
js代码：
1 var app = getApp() 2 Page({ 3 data: { 4 items: [], 5 startX: 0, //开始坐标 6 startY: 0 7 }, 8 onLoad: function () { 9 for (var i = 0; i < 10; i++) { 10 this.data.items.push({ 11 content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦", 12 isTouchMove: false //默认全隐藏删除 13 }) 14 } 15 this.setData({ 16 items: this.data.items 17 }) 18 }, 19 //手指触摸动作开始 记录起点X坐标 20 touchstart: function (e) { 21 //开始触摸时 重置所有删除 22 this.data.items.forEach(function (v, i) { 23 if (v.isTouchMove)//只操作为true的 24 v.isTouchMove = false; 25 }) 26 this.setData({ 27 startX: e.changedTouches[0].clientX, 28 startY: e.changedTouches[0].clientY, 29 items: this.data.items 30 }) 31 }, 32 //滑动事件处理 33 touchmove: function (e) { 34 var that = this, 35 index = e.currentTarget.dataset.index,//当前索引 36 startX = that.data.startX,//开始X坐标 37 startY = that.data.startY,//开始Y坐标 38 touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标 39 touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标 40 //获取滑动角度 41 angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); 42 that.data.items.forEach(function (v, i) { 43 v.isTouchMove = false 44 //滑动超过30度角 return 45 if (Math.abs(angle) > 30) return; 46 if (i == index) { 47 if (touchMoveX > startX) //右滑 48 v.isTouchMove = false 49 else //左滑 50 v.isTouchMove = true 51 } 52 }) 53 //更新数据 54 that.setData({ 55 items: that.data.items 56 }) 57 }, 58 /** 59 * 计算滑动角度 60 * @param {Object} start 起点坐标 61 * @param {Object} end 终点坐标 62 */ 63 angle: function (start, end) { 64 var _X = end.X - start.X, 65 _Y = end.Y - start.Y 66 //返回角度 /Math.atan()返回数字的反正切值 67 return 360 * Math.atan(_Y / _X) / (2 * Math.PI); 68 }, 69 //删除事件 70 del: function (e) { 71 this.data.items.splice(e.currentTarget.dataset.index, 1) 72 this.setData({ 73 items: this.data.items 74 }) 75 } 76 })
教程参考地址：http://www.jb51.net/article/108071.htm