因为之前的项目在做APP的时候需要这个功能,而且是动态获取的数据插入,也需要手动的添加新的模板,看了一些资料就自己开始写了这个简单的功能代码。代码可自行修改,可扩展强,没有其他依赖。
贴上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>侧滑删除功能</title>
    <style>
        body {
            background-color: #f2f2f2;
        }
        h1 {
            text-align: center;
            font-size: 1.4em;
            padding-top: 2em;
            padding-bottom: 2em;
        }
        .wrapper {
            position: relative;
            height: 100px;
            overflow: hidden;
        border-bottom: 1px solid #f2f2f2            
        }
        .container {
            position: absolute;
            left: 0;
            width: 100%;
            height: 100px;
            line-height: 100px;
            padding-left: 5%;
            box-sizing: border-box;
            background-color: #fff;
            font-size: 1.2em;
            font-weight: 200;
            
        }
        .delete {
            float: right;
        width: 80px;
        top: 0;
        right: 0;
        line-height: 100px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        height: 100px;
        }
        .delete i.iconfont {
            font-size: 1em;
            padding-right: 5px;
        }
        p {
            text-align: center;
            padding-top: 4em;
            padding-bottom: 6em;
            color: #555;
            font-size: 1em;
        }
        .add {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #fff;
            margin-bottom: 50px;
        }
        @keyframes noheight {
            0% {
                height: 100px;
                opacity: 1;
            }

            100% {
                height: 0px;
                opacity: 0;
            }
        }

        .noheight {
            animation: noheight .5s linear 0s forwards;
        }
    </style>
</head>
<body>
    <h1>移动WEB模拟原声APP滑动删除</h1>
    <div class="add" onclick="addCart()">添加一个</div>
    <div class="container-wrapper" id="container-wrapper">
        <div class="wrapper">
            <div class="container" ontouchstart="return touchstartF(event,this);" ontouchmove="return touchmoveF(event,this);">左右滑动1</div>
            <div class="delete" onclick="return toDelete(event,this);">
                <i class="iconfont icon-shanchu"></i>
                删除
            </div>
        </div>

        <div class="wrapper">
            <div class="container" ontouchstart="return tout,this);" ontouchmove="return touchmoveF(event,this);">左右滑动2</div>
            <div class="delete" onclick="return toDelete(event,this);">
                <i class="iconfont icon-shanchu"></i>
                删除
            </div>
        </div>
    </div>  
</body>
<script type="text/javascript">

    function touchstartF(event) {
        x = event.changedTouches[0].pageX;
        y = event.changedTouches[0].pageY;
        swipeX = true;
        swipeY = true;
    };
    function touchmoveF(event, e) {
        X = event.changedTouches[0].pageX;
        Y = event.changedTouches[0].pageY;
        // 左右滑动
        if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
            // 阻止事件冒泡
            event.stopPropagation();
            if (X - x > 10) {
                event.preventDefault();
                e.style.WebkitTransform = "translateX(" + 0 + "px)";
                e.style.transition = "-webkit-transform 300ms ease-in-out";
            }
            if (x - X > 10) {
                event.preventDefault();
                e.style.WebkitTransform = "translateX(" + -80 + "px)";
                e.style.transition = "-webkit-transform 300ms ease-in-out";
            }
            swipeY = false;
        }
        // 上下滑动
        if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
            swipeX = false;
        }
    };
        
        
    function toDelete(event, e) {
        var deleteL = document.querySelectorAll('.delete');
        var wrapper = document.querySelectorAll('.wrapper');
        for (var i = 0; i < wrapper.length; i++) {
            wrapper[i].style.transition = 'height 500ms';
            wrapper[i].style.webkitTransition = 'height 500ms';
            wrapper[i].style.overflow = 'hidden';
        }
        var deleteLB = e;

        var down = deleteLB.parentNode;
        if (down.clientHeight == '100') {
            // deleteLB.parentNode.style.height = '0';
            deleteLB.parentNode.classList.add('noheight');
            setTimeout(function () {
                down.remove();
            }, 700);
        }

    }
        
    function addCart() {
        var html = '<div class="wrapper">'
                    + '<div class="container" ontouchstart="return touchstartF(event,this);" ontouchmove="return touchmoveF(event,this);">左右滑动</div>'
                    +    '<div class="delete"onclick="return toDelete(event,this);">'
                    +        '<i class="iconfont icon-shanchu"></i> 删除'      
                    +    '</div>'
                    + '</div>'
        document.getElementById("container-wrapper").insertAdjacentHTML('beforeEnd', html)
    }
        
    
</script>
</html>

预览地址 →