提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

微信小程序滑动删除功能，没有组件自己撸了个Demo

组件微信程序 功能 删除 自己 没有 Demo
2023-09-27 14:29:06 时间

http://bbs.larkapp.com/thread-13805-1-1.html

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

效果图
 

1、wxml  touch-item元素绑定了bindtouchstart、bindtouchmove事件
[HTML]  纯文本查看  复制代码
?
1
2
3
4
5
6
< view class = "container" >
   < view class = "touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index = "{{index}}" bindtouchstart = "touchstart" bindtouchmove = "touchmove" wx:for = "{{items}}" wx:key = "" >
     < view class = "content" >{{item.content}}</ view >
     < view class = "del" catchtap = "del" data-index = "{{index}}" >删除</ view >
   </ view >
</ view >



2、wxss flex布局、css3动画

[CSS]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.touch-item {
   font-size : 14px ;
   display : flex;
   justify- content : space-between;
   border-bottom : 1px solid #ccc ;
   width : 100% ;
   overflow : hidden
 
}
.content {
   width : 100% ;
   padding : 10px ;
   line-height : 22px ;
   margin-right : 0 ;
   -webkit-transition: all 0.4 s;
   transition: all 0.4 s;
   -webkit-transform: translateX( 90px );
   transform: translateX( 90px );
   margin-left : -90px
}
.del {
   background-color : orangered;
   width : 90px ;
   display : flex;
   flex- direction : column;
   align-items: center ;
   justify- content : center ;
   color : #fff ;
   -webkit-transform: translateX( 90px );
   transform: translateX( 90px );
   -webkit-transition: all 0.4 s;
   transition: all 0.4 s;
}
.touch-move-active .content,
.touch-move-active .del {
   -webkit-transform: translateX( 0 );
   transform: translateX( 0 );
}


3、js  注释很详细

[JavaScript]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
var app = getApp()
Page({
   data: {
     items: [],
     startX: 0, //开始坐标
     startY: 0
   },
   onLoad: function () {
     for ( var i = 0; i < 10; i++) {
       this .data.items.push({
         content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦" ,
         isTouchMove: false //默认全隐藏删除
       })
     }
     this .setData({
       items: this .data.items
     })
   },
   //手指触摸动作开始 记录起点X坐标
   touchstart: function (e) {
     //开始触摸时 重置所有删除
     this .data.items.forEach( function (v, i) {
       if (v.isTouchMove) //只操作为true的
         v.isTouchMove = false ;
     })
     this .setData({
       startX: e.changedTouches[0].clientX,
       startY: e.changedTouches[0].clientY,
       items: this .data.items
     })
   },
   //滑动事件处理
   touchmove: function (e) {
     var that = this ,
       index = e.currentTarget.dataset.index, //当前索引
       startX = that.data.startX, //开始X坐标
       startY = that.data.startY, //开始Y坐标
       touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
       touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
 
       //获取滑动角度
       angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
 
     that.data.items.forEach( function (v, i) {
       v.isTouchMove = false
       //滑动超过30度角 return
       if (Math.abs(angle) > 30) return ;
       if (i == index) {
         if (touchMoveX > startX) //右滑
           v.isTouchMove = false
         else //左滑
           v.isTouchMove = true
       }
     })
     
     //更新数据
     that.setData({
       items: that.data.items
     })
   },
   /**
    * 计算滑动角度
    * @param {Object} start 起点坐标
    * @param {Object} end 终点坐标
    */
   angle: function (start, end) {
     var _X = end.X - start.X,
       _Y = end.Y - start.Y
     //返回角度 /Math.atan()返回数字的反正切值
     return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
   },
   //删除事件
   del: function (e) {
     this .data.items.splice(e.currentTarget.dataset.index, 1)
     this .setData({
       items: this .data.items
     })
   }
})





本主题由 臭臭打不死 于 7 天前 置顶

微信截图_20170105134336.png (24.63 KB, 下载次数: 0)

微信截图_20170105134336.png

微信截图_20170105134352.png (24.63 KB, 下载次数: 0)

微信截图_20170105134352.png

相关文章