<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="divport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>测试</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
touch-action: pan-y;
}
/*基本样式*/
.ovh{
overflow: hidden
}
.absolute{
position: absolute;
}
/*普通样式*/
.list-li {
line-height: 60px;
border-bottom: 1px solid #fcfcfc;
padding: 0 12px;
color: #666;
position: relative;
background: #f2f2f2;
-webkit-transform: translate(0px);
}
.btn {
top: 0;
right: -80px;
text-align: center;
background: #ffcb20;
color: #fff;
width: 80px
}
.btn2 {
top: 0;
right: -160px;
text-align: center;
background: #ffcb20;
color: #fff;
width: 80px
}
</style>
</head>
<body ontouchstart>
<ul id="list-ul" class="ovh"></ul>
<script id="list_tmp" type="text/html">
{
{
each lists arr i}}
<li data-id="li" class="list-li">
<div class="con">{
{
arr.cont}}</div>
<div class="btn absolute">删除</div>
<div class="btn2 absolute">修改</div>
</li>
{
{
/each}}
</script>
</body>
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script src="./dayjs.min.js"></script>
<script src="./template.4.12.1.js"></script>
<script>
var lists = [{
cont: "你的快递到了，请到楼下签收"
},
{
cont: "哇，你在干嘛，快点来啊就等你了"
},
{
cont: "小区门卫不让上来啊"
}
]
$('#list-ul').html(template('list_tmp', {
lists:lists}));
addLeftSlide("list-li",160);
/**
* 描述：html5苹果手机向左滑动删除特效
* className:需要滑动的节点
* num:向左的位移值。
* */
function addLeftSlide(className,num){
window.addEventListener('load', function() {
var initX; //触摸位置
var moveX; //滑动时的位置
var X = 0; //移动距离
var objX = 0; //目标对象位置
window.addEventListener('touchstart', function(event) {
event.preventDefault();
var obj = event.target.parentNode;
//判断触摸对象是否存在当前类
if(obj.className == className) {
initX = event.targetTouches[0].pageX;
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
}else{
return false;
}
window.addEventListener('touchmove', function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if(obj.className == className) {
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if(objX == 0) {
//translateX为0，没有左滑
if(X >= 0) {
//向右滑动正数 (已经在原始位置上右拉，回弹到原始位置)
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
}else{
//向左移动负数
var l = Math.abs(X);
obj.style.WebkitTransform = "translateX(" + -l + "px)";
if(l > num) {
l = num; //最大位移值
obj.style.WebkitTransform = "translateX(" + -l + "px)";
}
}
}else if(objX < 0) {
//translateX为负数，已经左滑了
if(X >= 0) {
//向右滑动
var r = -num + Math.abs(X);
console.log(r,"r")
obj.style.WebkitTransform = "translateX(" + r + "px)";
if(r > 0) {
r = 0;
obj.style.WebkitTransform = "translateX(" + r + "px)";
}
}else{
//向左滑动(已经在终点向左滑动)
obj.style.WebkitTransform = "translateX(" + -num + "px)";//已obj为对象始终距初始位置-num
}
}
}
});
});
window.addEventListener('touchend', function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if(obj.className == className) {
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
if(objX > -num/2) {
//向左滑动负数 如果位移大于位移值/2，那么执行操作(左拉的距离过小回弹到原始位置)
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
objX = 0;
} else {
//左拉距离足够可以执行向左平移
obj.style.WebkitTransform = "translateX(" + -num + "px)";
objX = -num;
}
}
});
});
}
</script>
https://www.jb51.net/article/82038.htm
