jQuery實現移動端左滑刪除功能

阿新 • • 發佈：2019-01-03

在手機移動端，經常需要實現類似微信聊天工具中的左滑動刪除和右滑動恢復功能。

這裡，我們可以直接使用jQuery來實現該效果。

基本原理：

利用jQuery中的touchstart、touchmove、touchend、touch事件和animate方法。
條目包裹區塊（item_wrap）和裡面的條目內容區塊（item_top）採用相對定位，刪除按鈕（item_del）採用絕對定位。
條目內容區塊預設是在刪除按鈕的上層，即它是蓋住了刪除按鈕。向左滑動條目內容區塊時，刪除按鈕就自動顯示出來了。
滑動時，利用css的left屬性實現實時滑動效果；touchend或touch時，利用animate方法實現動畫效果。

向左滑動大於等於刪除按鈕的一半寬度時，touchend時才完全顯示刪除按鈕；否則，恢復原狀。
當刪除按鈕已處於完全顯示狀態時，可通過右滑或touch條目內容區塊來恢復原狀；touch刪除按鈕時，刪除父元素節點。

完整的示例程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移動端左滑刪除、右滑恢復效果</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" 
></script>
<style> 
html {
    font-family:微軟雅黑;
    font-size:16px;
}
body, div, p, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, select{
    margin:0;
    padding:0;
}
.header, .footer {
    background-color: #ccc;
    border: 1px solid #aaa 
;
    height:6rem;
    font-size:2.5rem;
    text-align:center;
    line-height:6rem;
}
.footer {
    position: fixed;
    bottom:0;
    width:100%;
}
.item_wrap {
    position:relative;
    margin-top:1px;
    width:100%;
    text-align:center;
    height:6rem;
    line-height:6rem;
    font-size:2rem;
}
.item_wrap .item_top {
    position:relative;    
    top:0;
    border-bottom: 1px solid #888;
    background-color: #fff;
    overflow:hidden;
    z-index: 10;
}
.item_wrap .item_del {  /* 刪除按鈕位於條目內容的下一層 */
    position: absolute;
    background-color: #c00;
    top:0;
    right: 0;
    width: 15%;
    color: #fff;
    letter-spacing: 3px;
    z-index: 9;
}
</style>
</head>
<body>
<div>
    <div class="header">頭部導航</div>

    <div class="main">
        <div class="item_list">
            <div class='item_wrap'>
                <div class='item_top'>測試條目1</div>
                <div class="item_del">刪除</div>
            </div>
            <div class='item_wrap'>
                <div class='item_top'>測試條目2</div>
                <div class="item_del">刪除</div>
            </div>
            <div class='item_wrap'>
                <div class='item_top'>測試條目3</div>
                <div class="item_del">刪除</div>
            </div>
        </div>
    </div>

    <div class="footer">底部區域</div>
</div>
</body>
</html>

<script>
(function(){
    var start_x;   // touchstart時的水平起始位置
    var end_x;     // touchmove過程中的水平結束位置
    var touchmove = false;    // 標識是否成功觸發了touchmove，預設沒有觸發。

    // on方法事件繫結，可將事件繫結到新新增的子元素上
    $(document).on("touchstart",'.item_top',function(e){ // 觸控開始時
        if (e.originalEvent.targetTouches) {
            start_x = e.originalEvent.targetTouches[0].pageX;
        } else {
            start_x = e.pageX;
        }
//    console.log(start_x);
    });

    $(document).on("touchmove",'.item_top',function(e){ // 觸控過程中... 
        var width = $('.item_del:first').width();   // 刪除按鈕的寬
        var left = $(this).css('left');
        if(start_x - end_x >= 5){
            touchmove = true;
        }

        if (e.originalEvent.targetTouches) {
            end_x = e.originalEvent.targetTouches[0].pageX;
        } else {
            end_x = e.pageX;
        }

        if(start_x - end_x >= 0) {  // touchmove 向左移動
            if(parseInt(left) > -width){
                $(this).css('left', end_x-start_x+'px');  // 移動效果
            }
        }else{  // 向右移動
            if(parseInt(left) <0){
                $(this).animate({left:0},500);  // 恢復原狀（動畫效果）
            }
        }
    });

    $(document).on("touchend",'.item_top',function(e){  // 觸控擡起時
        var width = $('.item_del:first').width();   // 刪除按鈕的寬
        var offset = start_x - end_x;     // 偏移量
        if(touchmove==false) {
            return;
        }

        if( offset > 0){   // 左滑動
            if(offset>=width/2){      // 偏移量大於等於刪除按鈕的一半
                $(this).animate({left:-width+'px'},500);  // 動畫顯示刪除按鈕
            }else{
                $(this).animate({left:0},500);  // 恢復原狀
            }
        }
        touchmove = false;
    });

    $(document).on('touch', '.item_top',function(e){  // 點選主條目時，也可恢復原狀
        var width = $('.product_item_del:first').width();   
        var left = $(this).css('left');
        if(parseInt(left)<0){
            $(this).animate({left:0},500);  // 恢復原狀
        }
    });

    $(document).on('touch', '.item_del',function(e){  // 點選刪除，刪除父元素節點
        $(this).parent().remove();
    });
})();
</script>

jQuery實現移動端左滑刪除功能

在手機移動端，經常需要實現類似微信聊天工具中的左滑動刪除和右滑動恢復功能。這裡，我們可以直接使用jQuery來實現該效果。基本原理：利用jQuery中的touchstart、touchmo

基於JS實現移動端左滑刪除功能

HTML <div class="wrap pay-wrap" id="lists"> @foreach (var item in Model) { <div class="pay-list" style="h

移動端左滑刪除功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia

小程式實現左滑刪除功能

小程式中實現左滑刪除效果預覽： // wxml <view class="delete_list"> <view class="list" wx:for="{{listData}}" wx:key="{{index}}}" bindtouchstart=

mpvue實現小程式購物車左滑刪除功能

大家先看看效果使用了iview的效果上面的效果用到了 iView Weapp，點選進入官方文件現在開始介紹如何在微信小程式中使用iView Weapp 到GitHub下載 iView Weapp

用css巧妙實現移動端橫向滑動展示功能

公司需要做一個手機橫向滑動的效果，不想用js外掛，太麻煩，匯入程式碼也多。所以去網上找了一下，用css就能實現，挺方便的。主要利用了display:-webkit-box來實現。 <!DOCTYPE html> <html> <head> <ti

微信小程式左滑刪除功能開發案例

直接進入正題，我們需要做的就是通過手指滑動列表項後，右側出現刪除；比如說像這樣：向左邊滑動後出現如下的效果：開始擼程式碼～假設我們有N個列表項來自一個數組list，先確定基本的結構 <view class="list" wx:for="{{list}}" w

自定義UITableView實現自定義左滑刪除按鈕及多按鈕，拖拽cell和表頭進行排序

本文介紹了能拖拽cell和表頭進行排序的自定義UITableView,並且能自定義左滑顯示的UIButton樣式。先看左滑自定義按鈕效果圖： override func tableView(_ tableView: UITableView, editA

移動端側滑刪除demo

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, ma

小程式左滑刪除功能

在使用wepy框架中，對左滑刪除功能做解釋，通過touch事件的起止，完成事件的繫結和資料重新整理，來達到效果，大致程式碼如下： wxml <view class="touch-item" @

前端 html h5 移動端手機端仿ios左滑刪除效果

es2017 b- open translate def sna 技術 9.png replace 實現功能：左滑列表項（<li class="route-item" ></li>），出現刪除按鈕(<div class="removeJs"&

vue ---- 實現手機端（左滑刪除。右劃正常）

四種 ber prev 屬性 .html 綁定 .com htm 左右 touchstart: // 手指放到屏幕上的時候觸發 touchmove: // 手指在屏幕上移動的時候觸發 touchend: // 手指從屏幕上拿起的時候觸發

【前端開發例項】移動端購物車左滑刪除 -（七）

Question. 問題實現一個購物車中，左滑商品出現刪除按鈕的效果。 Solution. 解決 HTML文件部分： <ul class="cart-buy list" id="list"> <li class="cart

JS實現移動端下拉刷新更多分頁請求功能方法2.0

keyframes 發生 usb 第一次 odr back eight urn 返回頂部本次2.0升級版為js實現移動端加載更多下拉刷新更多分頁請求功能方法（數據一次請求，前端分頁，適用於數據流量較少，數據量壓力小的頁面）同時新增loading組件，turnToTop組件

iOS開發技術之實現tableView左滑刪除的三種操作方式

bject 新名字 app alert ecan sage LEDE dev ati p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC"; color: #000000; background

怎麼才能在APP裡實現移動端車牌識別功能？

隨著移動通訊技術和網際網路技術的不斷髮展, 使手機成為了重要的生產和生活工具, 手機已經成為資訊時代中最重要的資訊來源。企業為了迎合市場需求，也紛紛加入了移動互聯大軍，到現在基於手機端的APP已經深入到人們生活中的方方面面。那麼在APP中整合移動端車牌識別演算法需要注意哪些事項呢？移動端車牌識別OCR

怎麽才能在APP裏實現移動端車牌識別功能？

作者手機方案聯網 mar nag -a 點擊 ima 隨著移動通信技術和互聯網技術的不斷發展, 使手機成為了重要的生產和生活工具, 手機已經成為信息時代中最重要的信息來源。企業為了迎合市場需求，也紛紛加入了移動互聯大軍，到現在基於手機端的APP已經深入到人們生活中的方

基於vue2實現左側滑刪除功能

基於vue2實現左側滑刪除功能主要功能提供側滑刪除功能第一個滑動時其他的隱藏刪除點選刪除按鈕後隱藏刪除刪除樣式可以是圖片和文字垂直滑動超過30不觸發左滑解決與上拉重新整理和下拉載入衝突降低左滑靈敏度全部程式碼元件部分 <

Android ListView左滑刪除、左滑自定義功能

https://www.cnblogs.com/guop/p/5066062.html 最近專案需要ListView左滑刪除功能，蒐集了很多資料發現了一個某一前輩寫的庫能很簡單的實現這個功能，而且有原始碼，直接拿來使用了。庫名字叫做SwipeMenuListView，下面給大家演示一下使用

微信小程式左滑刪除效果的實現

小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。今天我們說下微信小程式左滑刪除效果的實現，現在市場上很多APP都在使用這個效果，一個listView頁面

jQuery實現移動端左滑刪除功能

相關推薦