實現功能：左滑列表項（<li class="route-item" ></li>），出現刪除按鈕(<div class="removeJs">刪除</div>)。

js部分的代碼如下：

 1 window.addEventListener(‘load‘,function(){
 2     var initX;
 3     var moveX;
 4     var X = 0;
 5     var objX = 0;
 6     var width=$(".removeJs").width();//按鈕的寬度(removeJs修改為按鈕的className)
 

 7     var liClassName=".route-item";//li的className(route-item修改為li的className)
 8     $("body").on("touchstart",liClassName,function (event) {
 9         var obj=this;
10             initX = event.targetTouches[0].pageX;
11             objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
 
12         if( objX == 0){
13             $("body").on(‘touchmove‘,liClassName,function(event) {
14                 // event.preventDefault();
15                 var obj=this;
16                     moveX = event.targetTouches[0].pageX;
17                     X = moveX - initX;
18                     if
 
 (X > 0) {
19                         obj.style.WebkitTransform = "translateX(" + 0 + "px)";
20                     }
21                     else if (X < 0) {
22                         var l = Math.abs(X);
23                         obj.style.WebkitTransform = "translateX(" + -l + "px)";
24                         if(l>width){
25                             l=width;
26                             obj.style.WebkitTransform = "translateX(" + -l + "px)";
27                         }
28                     }
29             });
30         }
31         else if(objX<0){
32             $("body").on("touchmove",liClassName,function (event) {
33                 // event.preventDefault();
34                 var obj=this;
35                     moveX = event.targetTouches[0].pageX;
36                     X = moveX - initX;
37                     if (X > 0) {
38                         var r = -width + Math.abs(X);
39                         obj.style.WebkitTransform = "translateX(" + r + "px)";
40                         if(r>0){
41                             r=0;
42                             obj.style.WebkitTransform = "translateX(" + r + "px)";
43                         }
44                     }
45                     else {     //向左滑動
46                         obj.style.WebkitTransform = "translateX(" + -width + "px)";
47                     }
48             });
49         }
50     })
51     $("body").on("touchend",liClassName,function (event) {
52         var obj=this;
53             objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
54             if(objX>-width/2){
55                 obj.style.WebkitTransform = "translateX(" + 0 + "px)";
56             }else{
57                 obj.style.WebkitTransform = "translateX(" + -width + "px)";
58             }
59     })
60 })

ps：實際項目中，只需修改如下兩行代碼即可：

var width=$(".removeJs").width();
var liClassName=".route-item";

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