最近做个项目，需要实现移动端左滑删除功能，当时js代码将网上找的进行删减优化，下面通过本文给大家分享基于js实现移动端左滑删除功能，感兴趣的朋友一起看看
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<p class="wrap pay-wrap" id="lists">
@foreach (var item in model)
{
<p class="pay-list" style="height:90px;margin: 10px 15px 10px 15px;" id="@item.uid">
<p class="pay-each" style="height:90px;margin-bottom:0; border-radius: 5px;">
<p class="pay-order-teacher" style="background-image:url(@item.diseaseinformation.listpicpath);height:70px;border-radius:0" onclick="turn('@item.diseaseinfoid')"></p><p class="detailp" style="padding:0;padding-top:10px" onclick="turn('@item.diseaseinfoid')">
@(item.diseaseinformation.title.getsubstr(60))
</p>
<p style="height:20px;margin-right:10px;line-height:20px;vertical-align:middle" onclick="turn('@item.diseaseinfoid')">
<span style="float:left;color: #808080;line-height:2;vertical-align:bottom;width:70%">来源：@(item.diseaseinformation.source)</span>
<span style="float:left;color: #808080;line-height:2;vertical-align:bottom;width:30%"><img src="~/content/img/yueduliang.png" style="height:20px" /> @(item.diseaseinformation.browsenum)</span>
</p>
<p class="pay-order-swiper" style="height:90px;margin-left:15px;width:80px"><a href="javascript:;" rel="external nofollow" onclick="del('@item.uid')" class="btn btn-red pay-order-btn pay-order-del" style="height:90px;line-height:90px;width:105px;font-size:18px">删除</a>
</p>
</p>
</p>
}
</p>
jquery.productswipe.js代码
/********************
* 基于jquery模拟移动端列表左右滑动删除
* author:yaohuitao@100tal.com
* ******************/
function prevent_default(e) {
e.preventdefault();
}
function disable_scroll() {
$(document).on('touchmove', prevent_default);
}
function enable_scroll() {
$(document).off('touchmove', prevent_default);
}
var mytouch = function (obj) {
//滑动删除
var drags = {};
drags.dragtag = false;//拖动状态
drags.dragstart = true;//拖动开始标志
drags.datatransx = 0;
$(obj)
.on('touchstart mousedown', function (e) {
if (!($(e.target).hasclass("pay-order-swiper") || $(e.target).parents().hasclass("pay-order-swiper"))) {
closeallswipe(); //点击还原
if (e.originalevent.targettouches) {
drags.dragx = e.originalevent.targettouches[0].pagex;
drags.dragy = e.originalevent.targettouches[0].pagey;
} else {
drags.dragx = e.pagex;
drags.dragy = e.pagey;
}
if ($(e.currenttarget).attr("data-transx")) {
drags.datatransx = parseint($(e.currenttarget).attr("data-transx"));
}
drags.dragtag = true;
drags.dragstart = true;
}
})
.on('touchmove mousemove', function (e) {
if (drags.dragtag) {
$(e.currenttarget).removeclass('animatedh');
$(e.currenttarget).addclass('dragstart'); //添加禁止选择
var change = 0;
if (e.originalevent.targettouches) {
change = e.originalevent.targettouches[0].pagex - drags.dragx;
changey = e.originalevent.targettouches[0].pagey - drags.dragy;
} else {
change = e.pagex - drags.dragx;
changey = e.pagey - drags.dragy;
}
if (drags.dragstart) {
if (math.abs(changey) < 20) {
showswiperfbn();
}
} else {
showswiperfbn();
}
function showswiperfbn() {
if (math.abs(change) > 20) {
drags.dragstart = false;
if (change < -20) {
change = change + drags.datatransx + 20;
} else {
change = change + drags.datatransx - 20;
}
change = math.min(math.max(-300, change), 0);
$(e.currenttarget).css('transform', 'translate3d(' + change + 'px,0px,0px)');
$(e.currenttarget).attr("data-transx", change);
disable_scroll();
}
}
}
})
.on('touchend mouseup', function (e) {
var left = parseint($(e.currenttarget).attr("data-transx"));
var new_left;
if ($(e.currenttarget).hasclass("open")) {
if (left > -110) {
new_left = 0;
$(e.currenttarget).removeclass('open');
} else {
new_left = -120;
}
} else {
if (left < -20) {
new_left = -120;
$(e.currenttarget).addclass('open');
} else {
new_left = 0;
}
}
$(e.currenttarget).removeclass('dragstart');
$(e.currenttarget).css('transform', 'translate3d(' + new_left + 'px,0px,0px)');
$(e.currenttarget).attr("data-transx", new_left);
$(e.currenttarget).addclass('animatedh');
drags.dragtag = false;
enable_scroll()
});
}
function closeallswipe() {
$('.pay-list .pay-each').css('transform', 'translate3d(0px,0px,0px)');
$('.pay-list .pay-each').removeclass('open');
$('.pay-list .pay-each').addclass('animatedh');
$('.pay-list .pay-each').attr("data-transx", 0);
}
页面使用 执行mytouch($('.pay-list .pay-each'));
以上就是利用javascript实现移动端左滑删除功能介绍的详细内容。