html消息页左滑删除模板,基于JS实现移动端左滑删除功能

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

2019-01-07

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了基于JS实现移动端左滑删除功能，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

@(item.DiseaseInformation.BrowseNum)

nofollow" οnclick="del('@item.UID')" class="btn btn-red pay-order-btn pay-order-del" style="height:90px;line-height:90px;width:105px;font-size:18px">删除

}

jquery.productswipe.js代码

删除

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

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

$('.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实现移动端左滑删除功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

以上是编程之家为你收集整理的基于JS实现移动端左滑删除功能全部内容，希望文章能够帮你解决基于JS实现移动端左滑删除功能所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！