//固定格式html，固定的css和下面那段固定的js
<li class="xxListLi" >
<!--你自己的内容*-->
<!--<div style="height: 200px;">bbbbbsdfasf sdffd</div>-->
/*删除和编辑，可以两个都添加或者任选一个*/
<div class="xxEditBtn">编辑</div>
<div class="xxDelBtn">删除</div>
</li>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vconsole@3.3.4/dist/vconsole.min.js"></script>
<title>JS Bin</title>
</head>
<!--<link rel="stylesheet" href="xxSwpie.css">-->
<style >
/*设置ul样式*/
ul.xxWrapUl {
padding: 0;
margin: 0;
}
ul.xxWrapUl, li.xxListLi {
overflow: hidden;
list-style: none;
}
li.xxListLi{
width:150%;
/*background:#ccc;*/
position:relative;
/*margin:1% 0;*/
margin:0;
position:relative;
-webkit-transition:all 0.3s linear;
transition:all 0.3s linear;
border-bottom: 1px solid #cccccc;
}
/*ul li div:first-of-type{
float:left;
!*width:80%;*!
}*/
li.xxListLi .xxDelBtn{
float:right;
/*padding:5% 0;*/
width:15%;
background:#ff0000;
text-align: center;
}
li.xxListLi .xxEditBtn{
float:right;
/*padding:5% 0;*/
width:15%;
background: #8dff66;
text-align: center;
}
/*设置移动效果*/
.xxMoveLeft1{
transform:translateX(-15%);
-webkit-transform:translateX(-15%);
}
.xxMoveLeft2{
transform:translateX(-33%);
-webkit-transform:translateX(-33%);
}
li.xxListLi>:first-child{
float:left
}
</style>
<body>
<li class="xxListLi" >
<div style="height: 200px;">bbbbbsdfasf sdffd</div>
<div class="xxEditBtn">编辑</div>
<div class="xxDelBtn">删除</div>
</li>
<li class="xxListLi">
<div style="height:50px">你好 sdffd</div>
<div class="xxDelBtn">删除</div>
</li>
<script>
/*$('li.xxListLi').append(`<div class="xxDelBtn">删除</div>`)*/
$('li.xxListLi').wrapAll(`<ul class="xxWrapUl"></ul>`)
//$(".xxDelBtn").css('height',$(".xxDelBtn").prev().height()+'px')
var x,y,X,Y,moveX,moveY;
var btnNum = 1
$('li.xxListLi').on('touchstart',function (e) {
if($(this).find('.xxDelBtn').length >0 && $(this).find('.xxEditBtn').length>0){
//设置长度
$(this).width('150%')
btnNum = 2
}else{
$(this).width('120%')
btnNum = 1
}
$(this).find('.xxDelBtn').css({
'height':$(this).children().eq(0).height()+'px',
'line-height':$(this).children().eq(0).height()+'px',
})
$(this).find('.xxEditBtn').css({
'height':$(this).children().eq(0).height()+'px',
'line-height':$(this).children().eq(0).height()+'px',
})
/*获取最初的触摸位置*/
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
moveX = true;
moveY = true;
})
$('li.xxListLi').on('touchmove',function (e) {
X = e.changedTouches[0].pageX;
Y = e.changedTouches[0].pageY;
//左右滑动
if(moveX && Math.abs(X - x) - Math.abs(Y -y) > 0){
e.stopPropagation();//阻止冒泡事件
//右滑收起删除按钮
if(X - x > 10){
//e.preventDefault();
$(this).removeClass("xxMoveLeft"+btnNum);
}
//左滑显示删除按钮
if(x - X > 10){
//e.preventDefault();
//deleteClass("xxMoveLeft")
$(this).addClass("xxMoveLeft"+btnNum);
open = this;//存入展开的li元素
}
moveY = false;//左右滑动时不执行上下滑动时的事件
}
})
</script>
</body>
</html>
