微信小程序实现左滑修改、删除功能

2023-09-06 11:54:05 282

本文实例为大家分享了微信小程序实现左滑修改、删除的具体代码，供大家参考，具体内容如下

wxml：










{{item.title}}党建项目报价表





{{item.create_time}}

wxss：

.offer-item{
height:150rpx;
width:100vw;
overflow-x:hidden;
border-bottom:1pxsolid#f0f0f0;
}

.offer-item>view{
position:absolute;
/*width:calc(100%+200rpx);*/
height:150rpx;
}

.offer-item.offer-item-top{
height:100%;
}

.offer-item.offer-item-topnavigator{
display:inline-block;
width:100vw;
height:100%;
}

.offer-item.content{
padding:35rpx30rpx;
position:relative;
height:calc(100%-70rpx);
}

.offer-item.title.fl{
display:inline-block;
width:78%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:30rpx;
color:#333;
}

.offer-item.title.fr{
display:inline-block;
width:20rpx;
height:26rpx;
margin-top:5rpx;
}

.offer-item.note{
position:absolute;
left:30rpx;
bottom:35rpx;
width:calc(100vw-60rpx);
font-size:24rpx;
color:#999;
}

.offer-item.posit{
width:200rpx;
height:150rpx;
line-height:150rpx;
text-align:center;
display:none
}

.posit.isMove{
display:inline-block;
position:absolute;
}

.posit.isMove[hidden]{
display:none
}

.offer-item.posit>view{
display:inline-block;
width:100rpx;
}

.offer-item.posit>view:first-of-type{
background-color:#FED847;
}

.offer-item.posit>view:last-of-type{
background-color:#C71B1B;
}

.offer-item.positimage{
display:inline-block;
width:36rpx;
height:36rpx;
}

js：

letlen=0;//初次加载长度
lethadLastPage=false;//判断是否到最后一页

varinitdata=function(that){
varlist=that.data.offerList
for(vari=0;i0){//移动距离大于0，文本层left值等于手指移动距离
txtStyle="left:-"+disX+"px";
if(disX>=delBtnWidth){
//控制手指移动距离最大值为删除按钮的宽度
txtStyle="left:-"+delBtnWidth+"px";
}
}
//获取手指触摸的是哪一个item
varindex=e.currentTarget.dataset.index;
varlist=that.data.offerList;
//将拼接好的样式设置到当前item中
list[index].txtStyle=txtStyle;

list[index].isMove=true;
//更新列表的状态
this.setData({
offerList:list
});
}
},
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+"px":"left:0px";
//获取手指触摸的是哪一项
varindex=e.currentTarget.dataset.index;
varlist=that.data.offerList;
list[index].txtStyle=txtStyle;
//更新列表的状态
that.setData({
offerList:list
});
}
},

/**
*
*/
navigatorTo:function(event){

},

/**
*删除操作
*/
del:function(e){
varthat=this;
vardata={
id:e.currentTarget.dataset.index
};
wx.showModal({
title:'',
content:'确定选择删除么？',
confirmColor:'#C71B1B',
cancelColor:'#666666',
success:function(res){
if(res.confirm){
utils.requestFun("接口url",data,'POST',function(msg){
console.log(msg)

wx.showToast({
title:'删除成功',
icon:'success',
duration:1500
})
varlists=that.data.offerList;
varlist1=[];
for(leti=0;i
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

微信小程序实现左滑修改、删除功能

热门推荐

随机推荐