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

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

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($(').工资清单支付-每个');

总结

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