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

2023-09-06 11:54:05 520

.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; }

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

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

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

热门推荐

随机推荐