js swipeDelete 滑動刪除
阿新 • • 發佈：2018-02-01
oct 轉碼 pointer utf-8 mobile {} sel 高光 display
先上圖看看整體實際效果
看看用法 與參數
默認參數
var defaults = {
distance:80, //滑動距離
units:‘px‘, //默認單位
touchStart:function(){},//觸摸開始回調
opened:function(){},//展開後回調
closed:function(){},//關閉後回調
duration:100,//毫秒
deleteBtn:‘.swipe-delete-btn‘, //刪除元素
direction:‘left‘, //滑動方向
deleteClose:true, //點擊刪除是否 關閉
deleteFn:function(){} //刪除事件 retuan false 不關閉 // retuan true 關閉
};
dom 節點如下 支持2種結構
<li id="li" class="swipe-delete-element list-li" >
<div class="con ">
00 向左側 滑動刪除 一起過來
</div>
<div class="swipe-delete-btn btn">刪除0</div>
</li>
<li id="li" class=" list-li">
<div class="con swipe-delete-element ">
11 向左側 滑動刪除 藏在後面
</div>
<div class="swipe-delete-btn btn" style="right:0px;">刪除1</div>
</li>
對應的js 如下
參數 deleteClose:false,用法 點擊 刪除按鈕並收回 滑動元素， 點擊事件回調函數 deleteFn裏面 return true 可以收回，或者通過 sa5.swipeClose() 方法促其關閉；
var swipedeletecontent5=document.querySelectorAll(".swipe-delete-element")[5];
var sa5=new swipeDelete(swipedeletecontent5,{
distance:160,
deleteBtn:‘.swipe-delete-btn2‘,
deleteClose:false,
//direction:‘left‘,
touchStart:function(e){
console.log("sa6 touchStart"+this.innerHTML);
//console.log(this.innerHTML==e.target.innerHTML);
},
opened:function(e){
//console.log("sa6 opened");
console.log("sa6 opened"+this.innerHTML);
},
closed:function(e){
//console.log("sa6 closed");
console.log("sa6 closed"+this.innerHTML);
},
deleteFn:function(e){
var that=this;
console.log(e.target.parentNode);
if(that.className=="on1"){
alert("5on11"+that.innerHTML+‘不 可以關閉‘);
}else if(that.className=="on2"){
alert("5on22"+that.innerHTML+‘可以關閉‘);
return true; //關閉
}
}
})
sa5.swipeOpen();
//console.log(sa5)
document.getElementById("j_opend").addEventListener("click",function(){
var swipe5=document.querySelector(".swipe5").querySelector(".swipe-delete-element");
var flagOpen=swipe5.getAttribute("data-lock");
if(flagOpen==‘false‘){
sa5.swipeOpen();
this.innerHTML="swipe5 關閉"
}
if(swipe5.getAttribute("data-lock")==‘true‘){
sa5.swipeClose();
this.innerHTML="swipe5打開 "
}
})
上面 其他方法
sa5.swipeOpen(); sa5.swipeClose();
附上完整代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑動刪除</title>
<meta http-equiv="X-UA-Compatible" content="edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 避免轉碼 -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="apple-itunes-app" content="app-id=932758491">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no" >
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="screen-orientation" content="portrait"> <!-- uc強制豎屏 設置橫屏應用得在config裏面設置，網頁是無法做到的 -->
<meta name="x5-orientation" content="portrait"> <!-- QQ強制豎屏 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- windows phone 點擊無高光 -->
<meta name="HandheldFriendly" content="true"> <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<style>
/* CSS Document */
@charset "utf-8";
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,span,img,button ,em,i,b{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-width:320px;font-size:62.5%;}
body{font-family:"微軟雅黑",‘Helvetica Neue‘,Helvetica,tahoma,arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1;font-size:14px;-webkit-touch-callout:none;-webkit-user-select:none;}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
dl,li,menu,ol,ul{list-style:none}
address,em,i,th{font-weight:400;font-style:normal}
a{color:#999;display:block;}
a:link,a:visited{color:#999;text-decoration:none;cursor:pointer}
a:hover{cursor:pointer}
a:active,a:focus{outline:0;}
img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;}
input,select{outline:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal;font-weight:normal;}
button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none}
::-webkit-input-placeholder{color:#777;}
::input-placeholder{color:#777;}
input:focus::-webkit-input-placeholder{-webkit-transition:.1s;opacity:0;}
input:focus::input-placeholder{transition:.1s;opacity:0;}
header {
background: #f7483b;
border-bottom: 1px solid #ccc
}
header h2 {
text-align: center;
line-height: 54px;
font-size: 16px;
color: #fff
}
.list-ul {
overflow: hidden
}
.list-li {
line-height: 60px; height: 60px;
border-bottom: 1px solid #fcfcfc;
position: relative;
color: #666;
background: #f2f2f2;
-webkit-transition-duration:-webkit-transform .1s;
transition-duration:transform .1s; -webkit-transition-timing-function:ease-out ;transition-timing-function:ease-out ;
}
.con{ padding: 0 15px; position: relative; z-index: 7; background: #f2f2f2;}
.btn {
position: absolute;
top: 0;
right: -80px;
text-align: center;
background: #ffcb20;
color: #fff;
width: 80px; z-index: 2;
}
.btn div {
float: left; display: inline-block; height: 60px;;
background: #ffcb20;
color: #fff;
width: 80px; z-index: 2;
}
.btn div:nth-of-type(2) {
background: red;
}
</style>
</head>
<body>
<header>
<h2>suface 滑動刪除 列表</h2>
</header>
<div style="height: 50px;; text-align: center; line-height: 50px;">http://www.cnblogs.com/surfaces/default.html</div>
<section class="list">
<ul class="list-ul">
<li id="li" class="swipe-delete-element list-li" >
<div class="con ">
00 向左側 滑動刪除 一起過來
</div>
<div class="swipe-delete-btn btn">刪除0</div>
</li>
<li id="li" class=" list-li">
<div class="con swipe-delete-element ">
11 向左側 滑動刪除 藏在後面
</div>
<div class="swipe-delete-btn btn" style="right:0px;">刪除1</div>
</li>
<li id="li" class=" list-li swipe-delete-element" >
<div class="con ">
22 向 you 側 滑動刪除
</div>
<div class="swipe-delete-btn btn" style="right:auto; left: -80px;">刪除2</div>
</li>
<li id="li" class=" list-li " >
<div class="con swipe-delete-element">
33 向you 側 滑動刪除 藏在後面
</div>
<div class="swipe-delete-btn btn" style="right:auto; left: 0px;">刪除3</div>
</li>
<li id="li" class=" list-li swipe-delete-element" >
<div class="con ">
44 向左側 滑動刪除 多個 點擊
</div>
<div class="swipe-delete-btn btn " style="right: -160px;width:160px">
<div style="width: 80px;" class="on1">4刪除111 多個</div>
<div style="width: 80px;" class="on2">4刪除222 多個</div>
</div>
</li>
<li id="li" class=" list-li swipe5" >
<div class="con swipe-delete-element " >
55 向左側 滑動刪除 藏在後面 swipe5
</div>
<div class="swipe-delete-btn2 btn" style="right: 0px;width:160px">
<div style="width: 80px;" class="on1">5刪除111 多個</div>
<div style="width: 80px;" class="on2">5刪除222 多個</div>
</div>
</li>
<li id="li" class=" list-li " >
<div class="con swipe-delete-element66">
666 swipe-delete-element66 參數傳入
</div>
<div class="swipe-delete-btn2 btn" style="right: 0px;width:160px">
<div style="width: 80px;" class="on1">6刪除111 多個</div>
<div style="width: 80px;" class="on2">6刪除222 多個</div>
</div>
</li>
</ul>
</section>
<div style="height: 400px;;">
<div id="j_opend" style="padding: 20px; text-align: center; background:#999; margin: 20px auto;">點擊swipe5 關閉 </div>
</div>
<script>
eval(function(d,e,a,c,b,f){b=function(a){return(a<e?"":b(parseInt(a/e)))+(35<(a%=e)?String.fromCharCode(a+29):a.toString(36))};if(!"".replace(/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return"\\w+"};a=1}for(;a--;)c[a]&&(d=d.replace(new RegExp("\\b"+b(a)+"\\b","g"),c[a]));return d}(‘(6(b,a,c){6 d(g,f){2 e=F;e.P=g;4(Z g==="27"){e.P=a.28(g)}8(e 22 d)?e.1H(e.P,f):W d(e.P,f)}d.1Y={1Z:d,1E:6(){18(2 f=1;f<E.1z;f++){18(2 e 1y E[f]){4(E[f].20(e)){E[0][e]=E[f][e]}}}8 E[0]},1x:9,1o:6(){2 g=a.2a("2b");2 f={2d:"2f",2i:"1R"};18(2 e 1y f){4(g.5[e]!==c){8 f[e]}}g=Y;8 7}(),1H:6(g,f){2 e=F;2 f=f||{};2 h={13:26,14:"16",1r:6(){},1p:6(){},1n:6(){},1m:1l,1d:".1S-1V-1X",S:"R",1c:9,11:6(){}};e.12=e.1E({},h,f);e.1A(g,e.12)},1A:6(h,t){2 o=F;2 s=h;2 n=7;2 m=9;2 f=c;2 r=0;2 i=0;2 l={x:0,y:0,1a:+W 19};2 g=s.1D(t.1d)[0];2 q=t.11;2 p=t.S;2 j=t.1c;s.17("Q-O","7");4(!g){g=s.1u.29==1&&s.1u.1D(t.1d)[0]}2 e=t.13;2 k=t.14;o.S=p;g.J("1B",6(v){2 u=F;2 v=v;2 w=v.2l;4(t.1c==9){o.K(s,t)}4(t.11&&t.11.X(w,E)==9){o.K(s,t)}v.1T()});s.J("1B",6(u){o.K(s,t)});s.J("1U",6(u){2 v=u.1w[0];4(!o.1x){8 7}n=7;m=9;f=c;l={x:v.1f||v.1g,y:v.1h||v.1i,1a:+W 19};s.5.1j=s.5.1k="24";i=(s.5.H.V(/G\\(/g,"").V(/(16|1v|%)\\)/g,""))*1||(s.5.I.V(/G\\(/g,"").V(/(16|1v|%)\\)/g,""))*1||0;4(s.1q("Q-O")=="7"){t.1r&&t.1r.X(s,E)}a.J("2c",6(y){4(!m){8}4(y.1w.1z>1||y.1t&&y.1t!==1){8}2 z=y.1F[0];2 x={x:z.1f||z.1g,y:z.1h||z.1i};4(Z f==="2g"){f=!!(f||15.U(x.x-l.x)<15.U(x.y-l.y))}4(f){m=7;8}y.1e();o.L=x.x-l.x+i;n=9;4(p=="R"){4(o.L>=0){s.5.H=s.5.I="G(-"+0+k+") M(0)"}N{2 w=15.U(o.L);s.5.H=s.5.I="G("+-w+k+") M(0)";4(w>e){w=e;s.5.H=s.5.I="G("+-w+k+") M(0)"}}}4(p=="1b"){4(o.L>=0){2 w=15.U(o.L);s.5.H=s.5.I="G("+w+k+") M(0)";4(w>e){w=e;s.5.H=s.5.I="G("+w+k+" ) M(0)"}}N{s.5.H=s.5.I="G(-"+0+k+") M(0)"}}});a.J("1W",6(x){4(!m||!n){n=7;m=7;8}n=7;m=7;2 A=x.1F[0];2 w={x:A.1f||A.1g,y:A.1h||A.1i,1C:+W 19};2 D=w.1C-l.1a;2 C=t.13;2 B=t.S;2 z=o.L;2 y="1Q";4(s.1q("Q-O")=="9"){y="23"}4(D<1G&&(z<-10&&B==="R"||z>10&&B==="1b")||D>1G&&(z<-T(C/3)&&B==="R"||z>T(C/3)&&B==="1b")){4(y=="1Q"){o.1I(s,t)}N{o.K(s,t);x.1e()}}N{o.K(s,t);x.1e()}})});8 F},K:6(l,m){2 h=F;2 l=l||h.P;2 m=m||h.12;2 e=7;2 k=h.1o;2 g=m.14;2 f=1J(m.1m/1K)||1l;2 i=0;2 j=6(n){l.1L(k,E.1M,7);e=9;j=Y;i++;4(i>1){8}l.17("Q-O","7");m.1n&&m.1n.X(l,E);2e=Y};l.5.H=l.5.I="G(-"+0+g+") ";l.5.1j=l.5.1k=f+"s";l.J(k,j.1N(F),7);1O(6(){4(e){8}j()},T(f+25));8 F},1I:6(m,n){2 i=F;2 m=m||i.P;2 n=n||i.12;2 f=n.13;2 h=n.14;2 g=1J(n.1m/1K)||1l;2 j=0;2 e=7;2 l=i.1o;2 k=6(o){m.1L(l,E.1M,7);e=9;k=Y;j++;4(j>1){8}m.17("Q-O","9");4(m.1q("Q-O")=="9"){n.1p&&n.1p.X(m,E)}};4(n.S=="R"){f=f*-1}m.2h;m.5.H=m.5.I="G("+f+h+") ";m.5.1j=m.5.1k=g+"s";m.J(l,k.1N(F),7);1O(6(){4(e){8}k()},T(g+25));8 F}};4(Z 1P=="2j"){2k.1P=d}N{4(Z 1s=="6"&&1s.2m){1s(6(){8 d})}N{b.2n=d}}})(2o,21);‘,
62,149," var if style function false return true arguments this translateX WebkitTransform transform addEventListener swipeClose touchesDiff translateZ else lock swipeElement data left direction parseInt abs replace new apply null typeof deleteFn options distance units Math px setAttribute for Date startTime right deleteClose deleteBtn preventDefault pageX clientX pageY clientY webkitTransitionDuration transitionDuration 100 duration closed endEvent opened getAttribute touchStart define scale parentNode rem touches allowMultiple in length swipeEvent click endTime querySelectorAll extend changedTouches 300 init swipeOpen Number 1000 removeEventListener callee bind setTimeout exports close transitionend swipe stopPropagation touchstart delete touchend btn prototype constructor hasOwnProperty document instanceof open 0s 80 string querySelector nodeType createElement div touchmove WebkitTransition callback webkitTransitionEnd undefined clientLeft transition object module target amd swipeDelete window".split(" "),
0,{}));
var swipedeletecontent=document.querySelectorAll(".swipe-delete-element")[0];
var sa= swipeDelete(swipedeletecontent,{
direction:‘left‘,
deleteFn:function(e){
alert(this.innerHTML)
console.log(e.target);
}
})
var swipedeletecontent1=document.querySelectorAll(".swipe-delete-element")[1];
var sa1= swipeDelete(swipedeletecontent1,{
deleteFn:function(e){
alert(this.innerHTML);
console.log(e.target);
}
})
var swipedeletecontent2=document.querySelectorAll(".swipe-delete-element")[2];
var sa2= swipeDelete(swipedeletecontent2,{
direction:‘right‘,
deleteFn:function(e){
alert(this.innerHTML);
console.log(e.target);
}
})
//console.log(sa2.swipeOpen())
var swipedeletecontent3=document.querySelectorAll(".swipe-delete-element")[3];
var sa3= swipeDelete(swipedeletecontent3,{
direction:‘right‘,
deleteFn:function(e){
alert(this.innerHTML);
console.log(e.target);
}
})
//console.log(sa3);
var swipedeletecontent4=document.querySelectorAll(".swipe-delete-element")[4];
var sa4= swipeDelete(swipedeletecontent4,{
distance:160,
direction:‘left‘,
deleteFn:function(e){
//console.log(e.target);
var that=this;
if(that.className=="on1"){
alert("on1"+that.innerHTML)
}else if(that.className=="on2"){
alert("on2"+that.innerHTML)
}
}
})
//console.log(sa4.swipeOpen())
var swipedeletecontent5=document.querySelectorAll(".swipe-delete-element")[5];
var sa5=new swipeDelete(swipedeletecontent5,{
distance:160,
deleteBtn:‘.swipe-delete-btn2‘,
deleteClose:false,
//direction:‘left‘,
touchStart:function(e){
console.log("sa6 touchStart"+this.innerHTML);
//console.log(this.innerHTML==e.target.innerHTML);
},
opened:function(e){
//console.log("sa6 opened");
console.log("sa6 opened"+this.innerHTML);
},
closed:function(e){
//console.log("sa6 closed");
console.log("sa6 closed"+this.innerHTML);
},
deleteFn:function(e){
var that=this;
console.log(e.target.parentNode);
if(that.className=="on1"){
alert("5on11"+that.innerHTML+‘不 可以關閉‘);
}else if(that.className=="on2"){
alert("5on22"+that.innerHTML+‘可以關閉‘);
return true; //關閉
}
}
})
sa5.swipeOpen();
//console.log(sa5)
document.getElementById("j_opend").addEventListener("click",function(){
var swipe5=document.querySelector(".swipe5").querySelector(".swipe-delete-element");
var flagOpen=swipe5.getAttribute("data-lock");
if(flagOpen==‘false‘){
sa5.swipeOpen();
this.innerHTML="swipe5 關閉"
}
if(swipe5.getAttribute("data-lock")==‘true‘){
sa5.swipeClose();
this.innerHTML="swipe5打開 "
}
})
var sa66=new swipeDelete(".swipe-delete-element66",{
distance:160,
deleteBtn:‘.swipe-delete-btn2‘,
deleteClose:true,
//direction:‘left‘,
touchStart:function(e){
console.log("sa6 touchStart"+this.innerHTML);
//console.log(this.innerHTML==e.target.innerHTML);
},
opened:function(e){
//console.log("sa6 opened");
console.log("sa6 opened"+this.innerHTML);
},
closed:function(e){
//console.log("sa6 closed");
console.log("sa6 closed"+this.innerHTML);
},
deleteFn:function(e){
var that=this;
console.log(e.target.parentNode);
if(that.className=="on1"){
alert("6on11"+that.innerHTML);
}else if(that.className=="on2"){
alert("6on22"+that.innerHTML)
}
//console.log(this.innerHTML);
}
})
console.log(sa66);
</script>
</body>
</html>
js swipeDelete 滑動刪除