微信小程序实现左滑动删除效果

2023-08-18 16:04:04 62

最近做微信小程序项目遇到左滑动效果，比如在我的收藏页面，我的历史浏览记录页面，我的购物车页面，大多数都会用到这种效果，我把代码复制出来，供大家参考，用的时候直接用模板，再此基础上修改就行。

wxml中的代码：








{{item.goods_name}}





￥{{item.goods_price}}
￥{{item.mktprice}}


可使用优惠券




对不起该商品已下架







删除

我这是对完接口之后的代码，循环items，然后用{{item.}}取到下面的值，并且用了一个判断，如果后台返回来的字段值marketable==‘true'，让其显示商品的销售价和原价，否则显示该商品已下架。

js中的代码：

data:{
startX:0,//开始坐标
startY:0
},
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){
varthat=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()返回数字的反正切值
return360*Math.atan(_Y/_X)/(2*Math.PI);
},

wxml中的代码：

.touch-item{
background-color:#fff;
margin-top:20rpx;
display:flex;
justify-content:space-between;
width:100%;
overflow:hidden;
box-sizing:border-box;
}

.content{
width:100%;
-webkit-transition:all0.4s;
transition:all0.4s;
-webkit-transform:translateX(180rpx);
transform:translateX(180rpx);
margin-left:-180rpx;
}

.touch-move-active.content,.touch-move-active.del{
-webkit-transform:translateX(0);
transform:translateX(0);
}

.com{
padding:25rpx;
height:210rpx;
}

.tp{
background-color:white;
float:left;
}

.img{
width:210rpx;
height:210rpx;
display:inline-block;
vertical-align:middle;
border-radius:15rpx;
}

.txt{
width:420rpx;
margin-left:270rpx;
position:relative;
}

.txt.tit{
font-size:28rpx;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}

.txt.bot{
width:100%;
font-size:24rpx;
margin-top:20rpx;
}

.ti1{
margin-top:15rpx;
font-size:23rpx;
background-color:#fce64c;
padding:10rpx;
display:inline-block;
}

.ti{
margin-top:35rpx;
font-size:28rpx;
display:inline-block;
color:#a2a2a2;
}

.del{
background-color:red;
width:180rpx;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
-webkit-transform:translateX(180rpx);
transform:translateX(180rpx);
-webkit-transition:all0.4s;
transition:all0.4s;
}

.new-price{
font-weight:600;
color:#ff503c;
font-size:35rpx;
}

.old-price{
margin-left:30rpx;
text-decoration:line-through;
font-size:28rpx;
color:#b1b1b1;
}

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

微信小程序实现左滑动删除效果

热门推荐

随机推荐