H5仿QQ消息滑动删除置顶效果

闲来无事，看到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>
H5仿QQ消息滑动删除置顶效果

猜你喜欢
