บทความนี้จะแบ่งปันตัวอย่างของการดำเนินการดำเนินการกับผู้ติดต่อที่คล้ายกับ QQ: ปัดซ้ายและเลื่อนปุ่มลบออก ถ้ามันเลื่อนมากกว่าครึ่งมันจะเลื่อนไปที่ด้านล่างโดยอัตโนมัติ ถ้ามันปล่อยน้อยกว่าครึ่งมันจะกลับไปยังสถานที่เดิม
การใช้งาน JS บริสุทธิ์
ใช้ h5 touchmove และกิจกรรมอื่น ๆ และใช้ JS เพื่อเปลี่ยนแอตทริบิวต์การแปลของ CSS3 แบบไดนามิกเพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหว:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = อุปกรณ์-width, ระดับเริ่มต้น = 1"> <title> html5swipe มาร์จิ้น: 0; รายการสไตล์: ไม่มี; } ส่วนหัว {พื้นหลัง: #f7483b; ขอบด้านล่าง: 1px Solid #CCC} ส่วนหัว H2 {TEXT-ALIGN: CENTER; ความสูงของสาย: 54px; ขนาดตัวอักษร: 16px; สี: #FFF} .List-ul {overflow: hidden} .List-li {line-height: 60px; ขอบด้านล่าง: 1px Solid #FCFCFC; ตำแหน่ง: ญาติ; Padding: 0 12px; สี: #666; ความเป็นมา: #F2F2F2; -webkit-transform: translatex (0px); } .BTN {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: -80px; TEXT-ALIGN: CENTER; ความเป็นมา: #FFCB20; สี: #FFF; ความกว้าง: 80px} </style> <script>/** คำอธิบาย: html5 Apple Phone swipes ซ้ายเพื่อลบเอฟเฟกต์พิเศษ*/window.addeventListener ('โหลด' ฟังก์ชั่น () {var initx; // ตำแหน่งสัมผัส var movex; // ตำแหน่ง var x = 0; Event.preventDefault (); } if (objx == 0) {window.addeVentListener ('touchmove', ฟังก์ชั่น (เหตุการณ์) {event.preventDefault (); var obj = event.target.parentNode; if (obj.className == "list -li") obj.style.webkittransform = "translatex (" + 0 + "px)"; -l + "px)";}}}}}); Event.targetTouches [0] .pagex; "px)";}} else {// swipe ซ้าย obj.style.webkittransform = "translatex (" + -80 + "px)" (obj.classname == "list -li") {objx = (obj.style.webkittransform.replace (/translatex/(/g, ""). replace (/px/)/g, "") * 1; 0;} else {obj.style.webkittransform = "translatex (" + -80 + "px)"; ชั้นล่าง </div> <div> ลบ </div> </li> <li> <li> <div> ว้าวคุณกำลังทำอะไรอยู่? มาอย่างรวดเร็วและรอคุณ </div> <div> ลบ </div> </li></ul> </section> </body> </html>ทำในปลั๊กอิน Zepto
ในโครงการจริงเราอาจมีหลายสถานที่ที่ใช้ฟังก์ชั่นนี้ ตอนนี้เราได้ทำฟังก์ชั่นนี้เป็นปลั๊กอิน Zepto เพื่อใช้งานง่ายในภายหลัง
ในปลั๊กอินนี้เราใช้ฟังก์ชั่นนี้เท่านั้นจากนั้นส่งผ่านพารามิเตอร์ (ลบชื่อสไตล์ของปุ่ม) เพื่อให้โปรแกรมคำนวณระยะทางที่จำเป็นในการเลื่อนใน JS ซึ่งสะดวกสำหรับการใช้ซ้ำ
zepto.touchwipe.js
/*** ปลั๊กอิน Zepto: ปัดไปทางซ้ายเพื่อลบเอฟเฟกต์ภาพเคลื่อนไหว* วิธีการใช้งาน: $ ('. itemWipe'). TouchWipe ({itemDelete: '.item-delete'}); * พารามิเตอร์: itemDelete ชื่อสไตล์ของปุ่มลบ*/; (ฟังก์ชั่น ($) {$ .fn.touchwipe = function (ตัวเลือก) {var defaults = {itemDelete: '.item-delete', // ลบองค์ประกอบ}; $ (opts.itemdelete) .width (); (obj.style.webkittransform.replace (/translatex/(/g, ""). แทนที่ (/px/)/g, "") * 1; Movex - initx; obj.style.webkittransform = "translatex (" + -l + "px)";}}}); > = 0) {var r = -delwidth + math.abs (x); obj.style.webkittransform = "translatex (" + -delwidth + "px)"; "). retplace (/px/)/g," ") * 1; OBJ.STYLE.TRANSITION = "ทั้งหมด 0.2S";touchwipe.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = อุปกรณ์-width, ระดับเริ่มต้น = 1"> <title> html5swipe มาร์จิ้น: 0; รายการสไตล์: ไม่มี;} ส่วนหัว {พื้นหลัง: #f7483b; ขอบด้านล่าง: 1px Solid #CCC} ส่วนหัว H2 {TEXT-ALIGN: CENTER; ความสูงของสาย: 54px; ขนาดตัวอักษร: 16px; สี: #FFF} .List-ul {overflow: hidden} .List-li {line-height: 60px; ขอบด้านล่าง: 1px Solid #FCFCFC; ตำแหน่ง: ญาติ; Padding: 0 12px; สี: #666; ความเป็นมา: #F2F2F2; -webkit-transform: translatex (0px); } .BTN {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: -80px; TEXT-ALIGN: CENTER; ความเป็นมา: #FFCB20; สี: #FFF; ความกว้าง: 80px} </style> </head> <body> <ส่วนหัว> <h2> รายการข้อความ </h2> </header> <section> <ul> <li id = "li"> <div> การจัดส่งด่วนของคุณมาถึงโปรดลงชื่อลง </div> <div> มาอย่างรวดเร็วและรอคุณ </div> <div> ลบ </div> </li> </ul> </section> <p> x: <span id = "x"> </span> </p> <p> objx: <span id = "objx"> </span> </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 = "ข้อความ/javascript" type = "text/javascript"> $ (function () {$ ('. list-li'). touchwipe ({itemdelete: '.btn'});}); </script> </body> </html>ผล:
เอฟเฟกต์แอปพลิเคชันในโครงการจริง:
กำจัดข้อบกพร่อง
ไปที่ขั้นตอนข้างต้นโดยทั่วไปเราตระหนักถึงฟังก์ชั่นที่เราต้องการ แต่ มีปัญหาหลายอย่าง :
1. การคลิกปุ่มลบทางด้านขวาล้มเหลวเนื่องจากช่วงไม่สามารถฟองลงบนปุ่มขนาดใหญ่ได้
2. ปัญหาร้ายแรงมาก เราเพิ่มเหตุการณ์ touchmove ลงใน DIV และบล็อกเหตุการณ์เบราว์เซอร์ดั้งเดิมด้วย PreventDefault () ซึ่งทำให้หน้าไม่สามารถเลื่อนได้เมื่อเลื่อนขึ้นและลง DIV!
ปัญหาแรกคือการแก้ปัญหาง่ายขึ้น เราลบช่วงโดยตรงและเขียน "ลบ" ลงใน CSS: ก่อนหน้านี้เช่นนี้:
.ItemWipe .Item-delete: ก่อน {เนื้อหา: 'ลบ'; สี: #FFF;}สำหรับปัญหาที่สองมีการกล่าวกันว่ามีการแก้ไขปัญหาออนไลน์ ที่นี่เราอ้างถึงการดำเนินการเลื่อนของผู้ติดต่อในมือถือ QQ
หลักการทั่วไป: ที่จุดเริ่มต้นของการเลื่อนให้พิจารณาว่าแกน y เคลื่อนที่มากขึ้นหรือแกน x เคลื่อนที่มากขึ้น หากแกน x เคลื่อนที่ขนาดใหญ่มันจะถูกตัดสินว่าเป็นการดำเนินการลบแบบเลื่อนและเราจะใช้ preventDefault ();
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน