手机版

基于射流研究…实现移动端左滑删除功能

时间:2021-09-04 来源:互联网 编辑:宝哥软件园 浏览:

废话不多说了,直接给大家贴代码了,具体代码如下所示:

div class=' wrap pay-wrap ' id=' list ' @ foreach(模型中的定义变量项){ div class=' pay-list ' style=' height :90 px;margin : 10px 15px 10px 15px ' id=' @ item .UID ' div class=' pay-each ' style=' height :90 px;保证金-底部:0;边框半径: 5px'div class=' pay-order-teacher ' style=' background-image : URL(@ item .疾病信息。list pic path);高度:70 px边框半径:0“onclick=”Turn(@ item .disease infoid()'/div div class=' detail div ' style=' padd :0;填充-top :10 px“onclick=”Turn(@ item .disease infoid()' @(项疾病信息。标题。getsubstr(60))/div div style=' height :20 px;右边距:10 px线高:20 px垂直对齐:中间“onclick=”Turn(@ item .disease infoid ')' span style=' float : left;颜色: # 808080线高:2;垂直对齐:底部;宽度:70% '来源:@(项目疾病信息。来源)/span span style=' float : left;颜色: # 808080线高:2;垂直对齐:底部;宽度:30% ' img src=' http : ~/Content/img/悦读良。png ' style=' height :20 px '/@(项目.疾病信息。browse num)/span/div class=' pay-order-swiper ' style=' height :90 px;边距-左侧:15像素;宽度:80 px ' a href=' JavaScript :'rel='外部无跟随' onclick=' del '(@ item .UID ')' class=' BTN BTN-红色支付订单-BTN支付订单-del ' style='高度:90 px线高:90 px宽度宽度:105px '字体大小:18px '删除/a/div/div/div }/divjquery。产品擦拭。射流研究…代码

/******************** * 基于jquery模拟移动端列表左右滑动删除* author :[email protected]* * * * * * * * * * * * * * * *函数prevent _ default(e){ e . prevent default();}函数disable_scroll() { $(文档).on('touchmove ',prevent _ default);}函数enable _ roll(){ $(文档)。off('touchmove ',prevent _ default);}var mytouch=function (obj) { //滑动删除var Drags={ };Drags.dragtag=false//拖动状态Drags.dragstart=true//拖动开始标志拖拉。data transx=0;美元.on('touchstart mousedown ',函数(e) { if(!($(e.target).有类('付款订单swiper ')| | $(e . target).父母()。has class(' pay-order-swiper '){ close all swipe();//点击还原if(e . originalevent。目标接触){ Dragx。Dragx=e . originalevent。目标触摸[0]。页面拖动。dragy=e . originalevent。target touch[0]。佩吉;} else { Dragx。Dragx=e . PageX拖拉。德拉吉=佩吉;} if ($(e.currentTarget).attr(' data-transX '){ Drags。data transx=ParSeint($(e . CurrentTarget)).attr(' data-TransX ');} DragTag . DragTag=TrueDragTags . DragStart=true } })。on('touchmove mousemove ',函数{ if(Dragtag。Dragtag){ $(e . CurrentTarget)).移除类(“动画h”);$(e.currentTarget).添加CLaSS('拖动开始');//添加禁止选择定义变量变化=0;if(e . originalevent。目标接触){ change=e . originalevent。目标触摸[0]。pageX-Dragx。Dragxchangey=e . originalevent。目标触摸[0].佩吉-拖动。拖动;} else { change=e . page x-Drags。dragxchangey=e . pagey-drag。德拉吉;}如果(拖动。拖动开始){ if(数学)。ABS(changey)20){ showswiperbn();} } else { showswiperbn();}函数showswiperbn(){ if(Math。ABS(变化)20){ Dragstart。Dragstart=false如果(变化-20){变化=变化排水。datatransx 20} else { change=change Drags。data transx-20;} change=Math.min(Math.max(-300,change),0);$(e.currentTarget).css('transform ',' translate 3d '(' change ' px,0px,0px)');$(e.currentTarget).attr('data-transX ',change);disable _ roll();} } } }) .on('touchend mouseup ',函数{ var left=Parseint($(e . CurrentTarget)).attr(' data-TransX ');var new _ left($(e . CurrentTarget).有类(' open '){ if(left-110){ new _ left=0;$(e.currentTarget).移除CLaSS(' open ');} else { new _ left=-120;} } else { if(left-20){ new _ left=-120;$(e.currentTarget).添加CLaSS(' open ');} else { new _ left=0;} } $(e.currentTarget).移除CLaSS('拖动开始');$(e.currentTarget).css('transform ',' translate 3d '(new _ left ' px,0px,0px)');$(e.currentTarget).attr('data-transX ',new _ left);$(e.currentTarget).addCLaSS('动画h ');drag . drag tag=false enable _ roll()});}函数closeallswipe() { $(' .工资清单。"各付各的"。css('transform ',' translate3D(0px,0px,0px)');$('.工资清单。"各付各的"。移除CLaSS(' open ');$('.工资清单。"各付各的"。添加CLaSS('动画h ');$('.工资清单。"各付各的"。attr('data-transX ',0);}页面使用执行mytouch($(').工资清单支付-每个');

总结

以上所述是小编给大家介绍的基于射流研究…实现移动端左滑删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

版权声明:基于射流研究…实现移动端左滑删除功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。