闲来无事,看到QQ消息里面的滑动删除置顶效果,于是就想了一下自己用H5要怎么实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="telephone=yes" name="format-detection" />
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="x5-fullscreen" content="true">
<meta name="apple-touch-fullscreen" content="yes">
<title>H5仿QQ消息滑动删除置顶效果</title>
<style>
* {margin: 0;padding: 0;}
body{padding-top:20px;background:#333;font-family:"微软雅黑";}
.list-item{background:#fff;overflow: hidden;}
.item{position:relative;height:50px;width:100%;font-size:0;border-bottom:1px solid #eee;transform:translateX(0px);transition:all .3s;}
.item span:nth-of-type(1){display:inline-block;font-size:14px;width:100%;line-height:50px;}
.item span:nth-of-type(2){border-bottom:1px solid #eee;position:absolute;right:-60px;display:inline-block;font-size:14px;width:60px;background:#ddd;text-align: center;line-height:50px;}
.item span:nth-of-type(3){border-bottom:1px solid #eee;position:absolute;right:-120px;display:inline-block;font-size:14px;width:60px;background:red;text-align: center;line-height:50px;}
.item.active{transform:translateX(-120px);transition:all .3s;}
</style>
</head>
<body>
<div class="list-item">
<div class="item">
<span>1这个是列表部分内容</span>
<span class="topbtn">置顶</span>
<span class="delbtn">删除</span>
</div>
<div class="item">
<span>2这个是列表部分内容</span>
<span class="topbtn">置顶</span>
<span class="delbtn">删除</span>
</div>
<div class="item">
<span>3这个是列表部分内容</span>
<span class="topbtn">置顶</span>
<span class="delbtn">删除</span>
</div>
<div class="item">
<span>4这个是列表部分内容</span>
<span class="topbtn">置顶</span>
<span class="delbtn">删除</span>
</div>
</div>
</body>
</html>
<script>
(function(select){
//将DomList转化为数组,以便使用forEach方法遍历dom
var itembox = Array.prototype.slice.call(document.querySelectorAll(select),0);
//使用forEach方法遍历dom
itembox.forEach(function(item, index ,arr){
console.log(item);
//小左边滑动
var startX, endX, movebox = item;
//触摸开始
function boxTouchStart(e) {
var touch = e.touches[0]; //获取触摸对象
startX = touch.pageX; //获取触摸坐标
}
//触摸移动
function boxTouchMove(e) {
var touch = e.touches[0];
endX = touch.pageX; //手指水平方向移动的距离
}
//触摸结束
function boxTouchEnd(e) {
console.log(startX+"start")
console.log(endX+"end")
//手指向左滑动
if (startX - endX >= 60) {
this.classList.add("active");
//手指向右滑动
} else {
this.classList.remove("active");
}
}
//滑动对象事件绑定
movebox.addEventListener("touchstart", boxTouchStart, false);
movebox.addEventListener("touchmove", boxTouchMove, false);
movebox.addEventListener("touchend", boxTouchEnd, false);
//点击删除按钮
movebox.querySelector(".delbtn").onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
//点击置顶按钮
movebox.querySelector(".topbtn").onclick = function(){
var parent = this.parentNode.parentNode;
parent.insertBefore(this.parentNode,parent.children[0]);
this.parentNode.classList.remove("active");
}
});
})(".list-item .item");
</script>