微信小程序左滑删除效果

没有高度封装，有人愿意封装优化下的可以弄下 
效果图 

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件

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>

2、wxss flex布局、css3动画

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. }
10. .content {
11. width: 100%;
12. padding: 10px;
13. line-height: 22px;
14. margin-right:0;
15. -webkit-transition: all 0.4s;
16. transition: all 0.4s;
17. -webkit-transform: translateX(90px);
18. transform: translateX(90px);
19. margin-left: -90px
20. }
21. .del {
22. background-color: orangered;
23. width: 90px;
24. display: flex;
25. flex-direction: column;
26. align-items: center;
27. justify-content: center;
28. color: #fff;
29. -webkit-transform: translateX(90px);
30. transform: translateX(90px);
31. -webkit-transition: all 0.4s;
32. transition: all 0.4s;
33. }
34. .touch-move-active .content,
35. .touch-move-active .del {
36. -webkit-transform: translateX(0);
37. transform: translateX(0);
38. }

3、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. //获取滑动角度
42. angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
43.  
44. that.data.items.forEach(function (v, i) {
45. v.isTouchMove = false
46. //滑动超过30度角 return
47. if (Math.abs(angle) > 30) return;
48. if (i == index) {
49. if (touchMoveX > startX) //右滑
50. v.isTouchMove = false
51. else //左滑
52. v.isTouchMove = true
53. }
54. })
55.  
56. //更新数据
57. that.setData({
58. items: that.data.items
59. })
60. },
61. /**
62. * 计算滑动角度
63. * @param {Object} start 起点坐标
64. * @param {Object} end 终点坐标
65. */
66. angle: function (start, end) {
67. var _X = end.X - start.X,
68. _Y = end.Y - start.Y
69. //返回角度 /Math.atan()返回数字的反正切值
70. return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
71. },
72. //删除事件
73. del: function (e) {
74. this.data.items.splice(e.currentTarget.dataset.index, 1)
75. this.setData({
76. items: this.data.items
77. })
78. }
79. })