この記事では、QQと同様の連絡先の操作を実装する例を紹介します。半分以上スライドすると、自動的に下部にスライドします。半分以下のリリースでは、元の場所に戻ります。
純粋なJS実装
H5 TouchMoveおよびその他のイベントを使用し、JSを使用してCSS3の翻訳属性を動的に変更してアニメーション効果を実現します。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width =" device-width = 1 "> <title> html5swipe残りマージン：0;リストスタイル：なし; } header {background：＃f7483b; Border-Bottom：1PX Solid #CCC}ヘッダーH2 {Text-Align：Center;ラインハイト：54px;フォントサイズ：16px;色：#fff} .list-ul {overflow：hidden} .list-li {line-height：60px;国境圏：1pxソリッド#FCFCFC;位置：相対;パディング：0 12px;色：＃666;背景：＃F2F2F2; -webkit-transform：transtex（0px）; } .btn {position：absolute;上：0;右：-80px;テキストアライグ：センター;背景：＃ffcb20;色：#fff; width：80px} </style> <script>/**説明：HTML5 Apple Phone Swipes Swipes Swipes Swipes Swipes Swipes Swipe refte onepection delete delete delete delete delea delea delea dever.addeventlistener（ 'load'、function（）{var initx; // touch position var movex; event.preventdefault（）; ""） * 1; if（objx == 0）{windo.addeventlistener（ 'touchmove'、function（event）{event.preventdefault（）; var obj = event.target.parentnode; > = 0）{obj.style.webkittransform（ " + 0 +" px）; "Translatex（" + -l + "px）"}}}}} {window.addeventlistener（ 'touchmove'、function（event）{event.preventdefault（）; event.targettouchs [0] x = initx; 「px）; （obj.classname == "list -li"）{objx =（obj.style.webkittransform.replace（/g、 "）.replace（/px/）/g、" "） * 1; objx = 0;階下</div> <div>削除</div> </li> <li> <div>すごい、何をしているの？すぐに来て、あなたを待ってください</div> <div> delete </div> </li> </ul> </section> </body> </html>Zeptoプラグインになりました
実際のプロジェクトでは、この関数を使用する多くの場所がある場合があります。これで、この機能をZeptoプラグインにして、後で使いやすいようにしました。
このプラグインでは、この関数のみを実装し、パラメーターを渡し（ボタンのスタイル名を削除します）、プログラムがJSのスライドに必要な距離を計算できるようにします。これは再利用に便利です。
Zepto.touchwipe.js
/*** ZEPTOプラグイン：アニメーション効果を削除するために左にスワイプ*使用方法：$（ '。ITEMWIPE'）。TouchWipe（{itemDelete： '.ITEM-DELETE'}）; *パラメーター：itemdelete deleteボタンのスタイル名*/;（function（$）{$ .fn.touchwipe = function（option）{var defaults = {itemdelete： 'item-delete'、// delete element}; $（itemdelete）.width（） （obj.style.webkittransform.replace（/transgex/（/g、 ""）.replace（/px/）/g、 ""） * 1; event.targetoutex x = movex; （l> delwidth）{l = delwidth.webkittransform（ " + -l +" px）} event.targettouchs [0] x = initx; 「px）; （obj.style.webkittransform.replace（/gratex/g、 ""）.replace（/px/）） * 1; 「Px）; //チェーンはこれを返します;}）（Zepto）;touchwipe.html
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width =" device-width = 1 "> <title> html5swipe残りマージン：0;リストスタイル：なし;} header {background：＃f7483b; Border-Bottom：1PX Solid #CCC}ヘッダーH2 {Text-Align：Center;ラインハイト：54px;フォントサイズ：16px;色：#fff} .list-ul {overflow：hidden} .list-li {line-height：60px;国境圏：1pxソリッド#FCFCFC;位置：相対;パディング：0 12px;色：＃666;背景：＃F2F2F2; -webkit-transform：transtex（0px）; } .btn {position：absolute;上：0;右：-80px;テキストアライグ：センター;背景：＃ffcb20;色：#fff;幅：80px} </style> </head> <body> <body> <header> <h2>メッセージリスト</h2> </header> <section> <section> <ul> <li id = "li"> <div>到着しました。すぐに来て、あなたを待ってください</div> <div> delete </div> </li> </ul> </section> <p> x：<span id = "x"> </span> </p> <p> objx：<span id = "objx"> </span> </p> <p> initx：<span id = "initx"> </p> <p> <p> <p> <p> <p> id = "Movex"> </span> </p> <script type = "text/javascript" src = "http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"> </script> <script type = "text/javascript" src = "zepto.tuchwipe type = "text/javascript"> $（function（）{$（'。list-li '）。touchwipe（{itemdelete：' .btn '}）;}）; </script> </body> </html>効果：
実際のプロジェクトにおけるアプリケーション効果：
バグを排除します
上記のステップに進むと、基本的に必要な機能が認識されます。しかし、いくつかの問題があります：
1.右側の削除ボタンをクリックすると、スパンが大きなボタンに泡立つことができないために失敗します。
2。非常に深刻な問題。 TouchMoveイベントをDIVに追加し、PreventDefault（）を使用して元のブラウザイベントをブロックしました。これにより、Divを上下にスライドするときにページがスクロールできなくなりました。
最初の問題は解決が簡単です。スパンを直接削除し、「削除」をCSSに書き込みます。
.itemwipe .item-delete：before {content： 'delete';色：#fff;}2番目の問題については、オンラインで解決するために表示されると言われています。ここでは、モバイルQQの連絡先のスライド操作を参照してください。
一般的な原則：スライドの開始時に、y軸がより多く動くか、x軸がより多く動くかどうかを判断します。 X軸が大きく移動すると、スライド削除操作として判断され、PreventDefault（）を使用します。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。