微信小程序左滑删除实现代码实例

2023-08-14 03:20:04 324

这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下




{{item.title}}
{{item.create_time}}



删除

.touch-item{
display:flex;
justify-content:space-between;
width:100%;
overflow:hidden;
margin-bottom:10rpx;
background:#f5f5f5;
height:216rpx;
}

.content{
width:100%;
margin-right:0;
-webkit-transition:all0.4s;
transition:all0.4s;
-webkit-transform:translateX(90px);
transform:translateX(90px);
margin-left:-90px;
}

.del{
width:90px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
-webkit-transform:translateX(90px);
transform:translateX(90px);
-webkit-transition:all0.4s;
transition:all0.4s;
font-size:35rpx;
}

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

//pages/touch/touch.js
Page({

/**
*页面的初始数据
*/
data:{
startX:0,
//开始坐标
startY:0,
page:1,
list:[{
id:0,
title:'标题1',
create_time:'2019-09-06'
},
{
id:1,
title:'标题2',
create_time:'2019-09-06'
},
{
id:2,
title:'标题3',
create_time:'2019-09-06'
},
]
},
touchE:function(e){
//console.log(e);
varthat=this
if(e.changedTouches.length==1){
//手指移动结束后触摸点位置的X坐标
varendX=e.changedTouches[0].clientX;
//触摸开始与结束，手指移动的距离
vardisX=that.data.startX-endX;
vardelBtnWidth=that.data.delBtnWidth;
//如果距离小于删除按钮的1/2，不显示删除按钮
vartxtStyle=disX>delBtnWidth/2?"left:-"+delBtnWidth+"rpx":"left:0rpx";

//获取手指触摸的是哪一项
varindex=e.currentTarget.dataset.index;
varlist=that.data.list;
list[index].txtStyle=txtStyle;
//更新列表的状态
that.setData({
list:list
});
}
},
//手指触摸动作开始记录起点X坐标
touchstart:function(e){
//开始触摸时重置所有删除
this.data.list.forEach(function(v,i){
if(v.isTouchMove)//只操作为true的
v.isTouchMove=false;
})this.setData({
startX:e.changedTouches[0].clientX,
startY:e.changedTouches[0].clientY,
list:this.data.list
})
},
//滑动事件处理
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.list.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({
list:that.data.list
})
},
/**
*计算滑动角度
*@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);
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
},
/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
},
/**
*生命周期函数--监听页面显示
*/
onShow:function(){
},
/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){
},
/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){
},
/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){
},
/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){
},
/**
*用户点击右上角分享
*/
onShareAppMessage:function(){
}
})

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

微信小程序左滑删除实现代码实例

热门推荐

随机推荐