基于JS实现移动端左滑删除功能

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

    @foreach (var item in Model)
    {
      
 
   
     @(item.DiseaseInformation.Title.GetSubstr(60))
   
   
     来源：@(item.DiseaseInformation.Source)
      @(item.DiseaseInformation.BrowseNum)
   
   删除
   
 
      
    }
  

jquery.productswipe.js代码

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'));

总结

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