//左滑删除
var lines = $(".itme1_content li");//左滑对象
var len = lines.length;
var lastXForMobile;//上一点位置
var pressedObj; // 当前左滑的对象
var lastLeftObj; // 上一个左滑的对象
var start;//起点位置
for (var i = 0; i < len; ++i) {
lines[i].addEventListener('touchstart', function (e) {
// e.preventDefault();//加上这句的话删除按钮就无法点击了
lastXForMobile = e.changedTouches[0].pageX;
pressedObj = this; // 记录被按下的对象
// 记录开始按下时的点
var touches = event.touches[0];
start = {
x: touches.pageX, // 横坐标
y: touches.pageY // 纵坐标
};
});
lines[i].addEventListener('touchmove', function (e) {
// 计算划动过程中x和y的变化量
var touches = event.touches[0];
delta = {
x: touches.pageX - start.x,
y: touches.pageY - start.y
};
// 横向位移大于纵向位移,阻止纵向滚动
if (Math.abs(delta.x) > Math.abs(delta.y)) {
event.preventDefault();
}
if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
$(lastLeftObj).css({'transform': 'translateX(0px)'}); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
var diffX = e.changedTouches[0].pageX - lastXForMobile;
if (diffX < -50) {
$(pressedObj).css({'transform': 'translateX(-80px)'}).siblings('li').css({'transform': 'translateX(0px)'}); // 左滑
lastLeftObj = pressedObj; // 记录上一个左滑的对象
} else if (diffX > 50) {
if (pressedObj == lastLeftObj) {
$(pressedObj).css({'transform': 'translateX(0px)'});// 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
}
});
lines[i].addEventListener('touchend', function (e) {
});
}
// 点击删除
mui("#refreshContainer").on('tap', '.li-delete', function (event) {
this.click();
event.stopPropagation();//阻止li事件的点击
var li_delete = $(this).parents('li');
var li_height = $(this).parents('li').height();
var add_height = li_height + 1;
var msg = confirm("是否确认删除?");
if (msg == true) {
$.post('/ist/fd_delete_item', {'data': $(this).attr('data')}, function (r) {
if (1 == r.status) {//以下是删除动画可忽略
li_delete.css({'opacity': '0'},200);
li_delete.css({"height": add_height});
setTimeout(function () {
li_delete.css({"height": 0}, 3000);
setTimeout(function () {
li_delete.remove();
}, 3000)
}, 200)
} else {
alert('删除失败');
}
});
} else {
return false;
}
});
移动端列表项左滑删除功能
最新推荐文章于 2024-07-08 10:19:38 发布