微信小程序基于movable-view实现滑动删除效果

2023-08-03 08:50:04 307

基于movable-view实现的一种较为完美的滑动删除效果

前言：用了很多去实现滑动删除的效果，都不太尽如人意，最后用小程序官方专用滑动组件来实现，但是这个组件有一点坑，咱们慢慢道来

1、wxml布局






{{'滑动删除'+item.id}}


删除

2、wxss（这里我用的less布局，布局很重要）

page{
background-color:#efefef;
}

.list{
padding:30rpx30rpx0;

.row{
width:100%;
overflow:hidden;
margin-bottom:30rpx;

.list_item{
border-radius:12rpx;
position:relative;
left:-120rpx;
width:calc(100%+120rpx);
height:160rpx;

.itmem_wrap{
width:calc(100%-120rpx);
height:100%;
display:flex;
align-items:center;
justify-content:center;
position:relative;
left:120rpx;
z-index:2;
background-color:#fff;
}

.delete_wrap{
position:absolute;
right:0;
top:0;
width:50%;
height:100%;
background-color:rgb(219,54,54);
display:flex;
justify-content:flex-end;
z-index:1;

.delete_btn{
width:120rpx;
height:100%;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
}
}
}
}
}

3、JavaScript

constapp=getApp()

Page({
data:{
list:[{
id:1
},
{
id:2
},
{
id:3
},
{
id:4
},
{
id:5
},
{
id:6
},
{
id:7
},
{
id:8
},
{
id:9
},
{
id:10
}
],
startX:'',
startY:''
},
onLoad:function(){
this.setListX();
},
//给每一项设置x值
setListX(){
this.data.list.map(item=>{
item.x=0;
})
this.setData({
list:this.data.list
})
},
//开始滑动
touchMoveStartHandle(e){
//我们要记录滑动开始的坐标点，后面计算要用到
if(e.touches.length==1){
this.setData({
startX:e.touches[0].clientX,
startY:e.touches[0].clientY
});
}
},
//滑动事件处理,一次只能滑出一个删除按钮为了防止滑动出现抖动，我们用滑动结束事件
touchMoveEndHandle:function(e){
varcurrentIndex=e.currentTarget.dataset.index,//当前索引
startX=this.data.startX,//开始X坐标
startY=this.data.startY,//开始Y坐标
touchMoveEndX=e.changedTouches[0].clientX,//滑动变化X坐标
touchMoveEndY=e.changedTouches[0].clientY,//滑动变化Y坐标
//获取滑动角度
angle=this.angle({
X:startX,
Y:startY
},{
X:touchMoveEndX,
Y:touchMoveEndY
});
//滑动超过50度角return，防止上下滑动触发
if(Math.abs(angle)>50)return;
this.data.list.map((item,index)=>{
if(touchMoveEndX>startX){
//右滑
if(index==currentIndex)item.x=0;
}else{
//左滑
item.x=-120
if(index!=currentIndex)item.x=0;
}
})
this.setData({
list:this.data.list
})
},
/**
*计算滑动角度
*start起点坐标
*end终点坐标
*Math.PI表示一个圆的周长与直径的比例，约为3.14159;PI就是圆周率π，PI是弧度制的π,也就是180°
*/
angle:function(start,end){
var_X=end.X-start.X,
_Y=end.Y-start.Y
return360*Math.atan(_Y/_X)/(2*Math.PI);
}
})

4、最终效果预览

总结

以上所述是小编给大家介绍的微信小程序基于movable-view实现滑动删除效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序基于movable-view实现滑动删除效果

热门推荐

随机推荐