模仿ios 左滑删除

最新推荐文章于 2023-09-01 11:22:00 发布

weixin_45725092

最新推荐文章于 2023-09-01 11:22:00 发布

阅读量154

点赞数

原文链接：https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=60995

版权

    <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>

<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 touchstartF(event,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">
	var lastElement = ""
	function touchstartF(event,e) {
		if (lastElement) {
			//隐藏上一个
			lastElement.style.WebkitTransform = "translateX(" + 0 + "px)";
			lastElement.style.transition = "-webkit-transform 300ms ease-in-out";
		}
		lastElement = e
		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"οnclick="return toDelete(event,this);">'
                    +        '<i class="iconfont icon-shanchu"></i> 删除'
                    +    '</div>'
                    + '</div>'
        document.getElementById("container-wrapper").insertAdjacentHTML('beforeEnd', html)
    }


</script>

weixin_45725092

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿ios 左滑删除

<style> body { background-color: #f2f2f2; } h1 { text-align: center; font-size: 1.4em; padding-top: 2em; padding-bottom: 2em; } .wrapper { position: relative; ...
复制链接

扫一扫