博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
微信小程序滑动删除功能，没有组件自己撸了个Demo
阅读量：4085 次
发布时间：2019-05-25

本文共 3353 字，大约阅读时间需要 11 分钟。

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
    
})
  
}
})





 (24.63 KB, 下载次数: 0)

微信截图_20170105134336.png

 (24.63 KB, 下载次数: 0)

微信截图_20170105134352.png

转载地址：http://rihni.baihongyu.com/

你可能感兴趣的文章
获取App Store中App的ipa包
查看>>
iOS 关于pods-frameworks.sh:permission denied报错的解决
查看>>
设置tabbaritem的title的颜色及按钮图片
查看>>
动态设置label的高度
查看>>
图片压缩
查看>>
检测缓存文件是否超时
查看>>
十进制字符串转十六进制字符串
查看>>
属性字符串（富文本）的使用
查看>>
GPS定位
查看>>
地图、显示用户位置、大头针
查看>>
自定义大头针
查看>>
UIButton添加block点击事件
查看>>
利用runtime给类别添加属性
查看>>
本地推送
查看>>
FMDB的使用
查看>>
UIImage存为本地文件与UIImage转换为NSData
查看>>
[转]打印质数的各种算法
查看>>
[转]javascript with延伸的作用域是只读的吗？
查看>>
php的autoload与global
查看>>
IE不支持option的display:none属性
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-09-20 11:02:16   当前IP: 3.137.219.16   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我