這裡，我們可以直接使用jquery來實現該效果。
基本原理：
完整的示例**如下：
charset="utf-8">
移動端左滑刪除、右滑恢復效果title>
src="">
script>
html
body, div, p, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, select
.header, .footer
.footer
.item_wrap
.item_wrap
.item_top
.item_wrap
.item_del
style>
head>
class="header">頭部導航div>
class="main">
class="item_list">
class='item_wrap'>
class='item_top'>測試條目1div>
class="item_del">刪除div>
div>
class='item_wrap'>
class='item_top'>測試條目2div>
class="item_del">刪除div>
div>
class='item_wrap'>
class='item_top'>測試條目3div>
class="item_del">刪除div>
div>
div>
div>
class="footer">底部區域div>
div>
body>
html>
(function
() else
// console.log(start_x);
});$(document).on("touchmove",'.item_top',function
(e) if (e.originalevent.targettouches) else
if(start_x - end_x >= 0)
}else,500); // 恢復原狀（動畫效果）}}
});$(document).on("touchend",'.item_top',function
(e) if( offset > 0),500); // 動畫顯示刪除按鈕
}else,500); // 恢復原狀}}
touchmove = false;
});$(document).on('touch', '.item_top',function
(e),500); // 恢復原狀
}});
$(document).on('touch', '.item_del',function
(e));
})();
script>
移動端左滑右滑元件
很久沒發布文章了，一方面工作原因，一方面是惰性開始出來了。希望能繼續堅持菜雞之路。最近有個需求，移動端有導航，需要左滑右滑的時候就能切換導航，跟輪播一樣的效果，但是輪播內容少，而且是一次性載入資料。而需求是很多態別，每個型別有非常多的列表，如果使用輪播，一次性載入資料太多，再加上分頁，那就完全行不通...
JS實現移動端購物車左滑刪除功能
1 doctype html 2 html 3 head 4 meta charset utf 8 5 meta name viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable no...
IOS UITableView實現左滑刪除
tableview有乙個很好用的左滑功能，一般ios的使用者習慣就是左滑刪除，當然，還可以自定義上面的文字。下面就來說一說左滑刪除的實現，要呼叫兩個tableview的 方法。uitableviewcelleditingstyle tableview uitableview tableview ed...