JS類比左滑刪除

最後更新：2016-12-09 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：需要時間部分 border parent 部落格 apple html att

接觸前端有半年的時間了，不會的都會去搜尋別人的代碼，這是本人第一篇部落格，也是因為在搜尋了很多關於左滑刪除的例子，但是結果並不是很好，雖然樣式上面實現了，但是大多數都會有無法點擊刪除或是無法控制事件的困擾，所以簡單整理一種寫法，菜鳥一隻，只求不噴~

先簡單說一下思路，在一個container容器裡面，定義兩個平級的標籤【顯示內容+刪除按鈕】，，按鈕絕對位置在右側，z-index 在後方，需要固定寬度，當滑動顯示內容的部分，按鈕顯示出來。通過 active 的添加和刪除實現，下面是代碼部分：

首先，HTML部分，很簡單，一個簡單的內容，一個delete按鍵

<body>
<ul data-role="listview" class="swipe-delete">
    <li>
        <div class="behind" data-touch="true">左滑刪除</div>
        <span>Delete</span>
    </li>

 　　<li>
        <div class="behind" data-touch="true">左滑刪除</div>
        <span>Delete</span>
    </li>

</ul>
</body>

加上簡單的CSS樣式（微醜）

<style>
    *{
        margin:0;
        padding:0;
        list-style: none;
    }
    .swipe-delete{
        margin:0 auto;
    }
    li{
        position: relative;
        border-bottom:1px solid red;
    }
    .behind {
        position:relative;
        width: 100%;
        height: 60px;
        line-height: 60px;
        z-index: 10;
        background: #ffffff;

        transition: all 0.3s ease;
        -webkit-transition: all 0.30s ease;
    }
    .active{
        transform: translate(-60px,0) translateZ(0);
        -webkit-transform: translate(-60px,0) translateZ(0);
    }
    span{
        position: absolute;
        right:0;
        bottom:0;
        top:0;
        width:60px;
        color:#ffffff;
        text-align: center;
        background: red;
        font-size: 20px;
        line-height: 60px;
        z-index: 1;
    }
</style>

效果如下：

js來嘍~ 【注】需要引入zepto.js

<script src="zepto.js"></script>
<script type="text/javascript">
    $(function() {

        var oBody = $(document.body), X, Y,startX,startY,moveEndX,moveEndY;
//第一步：擷取觸碰的位置座標
        oBody.on("touchstart", "li", function (e) {
            startX = e.originalEvent.changedTouches[0].pageX;
            startY = e.originalEvent.changedTouches[0].pageY;
        });
//abs()是取到元素的絕對值，下面是通過判斷touch座標來決定滑動方向

oBody.on("touchmove", "li", function (e) {
            e.preventDefault();
            moveEndX = e.originalEvent.changedTouches[0].pageX;
            moveEndY = e.originalEvent.changedTouches[0].pageY;
            X = moveEndX - startX;
            Y = moveEndY - startY;
            var $touchDoom = $(this).children(".behind");
//X軸的絕對值大於Y軸的絕對值並且x<0,是向左滑動
            if (Math.abs(X) > Math.abs(Y) && X < 0) {
//給每一個預設滑動的元素增加預設屬性data-touch ，data-touch == ‘true‘,表示可以滑動

                if($touchDoom.attr("data-touch") == ‘true‘){
                    $(this).siblings(‘li‘).find(".behind").attr("data-touch","true").removeClass("active");
                    $touchDoom.addClass("active");
                    $touchDoom.attr("data-touch","false");
                }
            }
//反之......
            else if (Math.abs(X) > Math.abs(Y) && X > 0) {
                if($touchDoom.attr("data-touch") == ‘false‘){
                    $touchDoom.removeClass("active");
                    $touchDoom.attr("data-touch","true");
                }
            }
        });

//點擊刪除

        oBody.on("click", "li span", function () {
            var parent = $(this).parent("li");
            $(this).parent("li").hide(200,function(){
                parent.remove();
            });
        });
    });
</script>


附上完整代碼，僅供參考

<!DOCTYPE html>
<html>

<head>
    <title>JQM Swipe Delete</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .swipe-delete{
            margin:0 auto;
        }
        li{
            position: relative;
            border-bottom:1px solid red;
        }
        .behind {
            position:relative;
            width: 100%;
            height: 60px;
            line-height: 60px;
            z-index: 10;
            background: #ffffff;

            transition: all 0.3s ease;
            -webkit-transition: all 0.30s ease;
        }
        .active{
            transform: translate(-60px,0) translateZ(0);
            -webkit-transform: translate(-60px,0) translateZ(0);
        }
        span{
            position: absolute;
            right:0;
            bottom:0;
            top:0;
            width:60px;
            color:#ffffff;
            text-align: center;
            background: red;
            font-size: 20px;
            line-height: 60px;
            z-index: 1;
        }
    </style>
</head>

<body>
<ul data-role="listview" class="swipe-delete">
    <li>
        <div class="behind" data-touch="true">左滑刪除</div>
        <span>Delete</span>
    </li>
    <li>
        <div class="behind" data-touch="true">左滑刪除</div>
        <span>Delete</span>
    </li>
    <li>
        <div class="behind" data-touch="true">左滑刪除</div>
        <span>Delete</span>
    </li><li>
    <div class="behind" data-touch="true">左滑刪除</div>
    <span>Delete</span>
</li>
    <li>
        <div class="behind" data-touch="true">左滑刪除</div>
        <span>Delete</span>
    </li>

</ul>
</body>

<script src="zepto.js"></script>
<script type="text/javascript">
    $(function() {

        var oBody = $(document.body), X, Y,startX,startY,moveEndX,moveEndY;

        oBody.on("touchstart", "li", function (e) {
            startX = e.originalEvent.changedTouches[0].pageX;
            startY = e.originalEvent.changedTouches[0].pageY;
        });

        oBody.on("touchmove", "li", function (e) {
            e.preventDefault();
            moveEndX = e.originalEvent.changedTouches[0].pageX;
            moveEndY = e.originalEvent.changedTouches[0].pageY;
            X = moveEndX - startX;
            Y = moveEndY - startY;
            var $touchDoom = $(this).children(".behind");
            if (Math.abs(X) > Math.abs(Y) && X < 0) {
                if($touchDoom.attr("data-touch") == ‘true‘){
                    $(this).siblings(‘li‘).find(".behind").attr("data-touch","true").removeClass("active");
                    $touchDoom.addClass("active");
                    $touchDoom.attr("data-touch","false");
                }
            }
            else if (Math.abs(X) > Math.abs(Y) && X > 0) {
                if($touchDoom.attr("data-touch") == ‘false‘){
                    $touchDoom.removeClass("active");
                    $touchDoom.attr("data-touch","true");
                }
            }
        });

        oBody.on("click", "li span", function () {
            var parent = $(this).parent("li");
            $(this).parent("li").hide(200,function(){
                parent.remove();
            });
        });
    });
</script>

</html>

JS類比左滑刪除

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JS類比左滑刪除

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support