สรุป
Iscroll 4 เวอร์ชันนี้เขียนรหัสต้นฉบับของเฟรมเวิร์ก Iscroll ใหม่อย่างสมบูรณ์ โครงการนี้ถูกสร้างขึ้นทั้งหมดเนื่องจากการใช้เบราว์เซอร์ WebKit บนมือถืออย่างกว้างขวาง (เช่น iPhone, iPad, Android)
วิธีการที่มีการแปลในการเลื่อนเนื้อหาขององค์ประกอบที่กำหนดความสูงและความกว้าง น่าเสียดายที่ในกรณีนี้หน้าเว็บแอปพลิเคชันทั้งหมดไม่สามารถมีส่วนหัวส่วนท้ายของหน้าหรือเนื้อหาที่เลื่อนได้พร้อมตำแหน่ง: สัมบูรณ์
พื้นที่กลาง
อย่างไรก็ตามการแก้ไขล่าสุดของระบบ Android สามารถรองรับคุณสมบัตินี้ได้แล้ว (แม้ว่าการสนับสนุนจะไม่ดีเป็นพิเศษ) และดูเหมือนว่า Apple จะลังเลที่จะใช้เหตุการณ์สไลด์แบบนิ้วเดียวกับองค์ประกอบ DIV
นอกเหนือจากคุณสมบัติของ ISCroll เวอร์ชันก่อนหน้านี้ Iscroll 4 ยังมีคุณสมบัติต่อไปนี้:
(1) ซูม (หยิก/ซูม)
(2) ดึงขึ้น/ลงเพื่อรีเฟรช
(3) การปรับปรุงความเร็วและประสิทธิภาพ
(4) จับองค์ประกอบอย่างถูกต้อง
(5) แถบเลื่อนแบบกำหนดเอง
เคล็ดลับที่เป็นมิตร: Iscroll 4 ไม่ใช่ทางเลือกง่าย ๆ สำหรับ Iscroll 3 และเอกสาร API นั้นแตกต่างกันแล้ว นอกจากนี้เมื่อพิจารณาว่ารุ่นนี้อยู่ในเบต้า API บางตัวอาจมีการเปลี่ยนแปลงเล็กน้อย
คู่มือผู้ใช้
ในเอกสารนี้คุณจะพบตัวอย่างมากมายเพื่อสอนวิธีเริ่มต้นอย่างรวดเร็วด้วยไลบรารีสคริปต์ Iscroll อาจเป็นเรื่องน่าเบื่อเล็กน้อยที่จะอ้างถึงตัวอย่างการสาธิตในบทความและอ่านเอกสารนี้อย่างรอบคอบ แต่บทความนี้เป็นสาระสำคัญของไลบรารีสคริปต์ Iscroll
Iscroll จำเป็นต้องเริ่มต้นองค์ประกอบที่จะเลื่อนและไม่ จำกัด จำนวนองค์ประกอบที่ใช้ isCroll ในหน้า (การกำหนดค่าฮาร์ดแวร์ของคุณไม่ได้พิจารณาที่นี่) ประเภทและความยาวของเนื้อหาในองค์ประกอบการเลื่อนจะส่งผลกระทบต่อไลบรารีสคริปต์ iScroll ในระดับหนึ่ง
จำนวนองค์ประกอบที่สามารถใช้พร้อมกันได้
เมื่อใช้ไลบรารีสคริปต์ Iscroll โครงสร้างของแผนผัง DOM ควรง่ายพอที่จะลบแท็กที่ไม่จำเป็นและพยายามหลีกเลี่ยงการทำรังของแท็กมากเกินไป
โครงสร้างที่ดีที่สุดของการใช้ iscroll มีดังนี้:
<div id = "wrapper"> <ul> <li> </li> ...... </ul> </div>
ในตัวอย่างเล็ก ๆ นี้แท็ก UL จะถูกเลื่อน Iscroll จะต้องเชื่อมต่อกับ wrapper นอกเนื้อหาการเลื่อนเพื่อสร้างผลลัพธ์
【ข้อควรระวัง】:
เฉพาะองค์ประกอบลูกแรกใน wrapper เท่านั้นที่สามารถเลื่อนได้ หากคุณต้องการองค์ประกอบเพิ่มเติมในการเลื่อนคุณสามารถลองใช้วิธีการเขียนต่อไปนี้:
<div id = "wrapper"> <div id = "scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
ในตัวอย่างนี้องค์ประกอบ Scroller สามารถเลื่อนได้แม้ว่ามันจะมีองค์ประกอบ UL สององค์ประกอบ
Iscroll จะต้องได้รับการยกตัวอย่างก่อนโทรคุณสามารถสร้างอินสแตนซ์ IsCroll ในกรณีต่อไปนี้:
(1) ใช้เหตุการณ์ OnDomContentLoaded เพื่อให้ได้การเลื่อน
เหมาะสำหรับการเลื่อนเนื้อหามีเฉพาะข้อความและรูปภาพและรูปภาพทั้งหมดมีขนาดคงที่
<script src = "iscroll.js"> </script> <script> var myscroll; ฟังก์ชั่นโหลด () {myscroll = ใหม่ iScroll ("wrapper"); } window.addeventListener ("domcontentloaded", โหลด, เท็จ); </script>หมายเหตุ: ตัวแปร myscroll เป็นทั่วโลกดังนั้นคุณสามารถเรียกมันได้ทุกที่
(2) ใช้เหตุการณ์ OnLoad เพื่อให้ได้การเลื่อน
เนื่องจากเหตุการณ์ domcontentloaded จะถูกเรียกหลังจากโหลดโครงสร้าง DOM ความยาวและความกว้างของพื้นที่การเลื่อนอาจไม่ได้รับการพิจารณาก่อนที่องค์ประกอบต่าง ๆ จะไม่ถูกโหลด ในเวลานี้สามารถนำเหตุการณ์ ONLOAD ได้
<script src = "iscroll.js"> <script> <script> var myscroll; ฟังก์ชั่นโหลด () {settimeout (function () {myscroll = new iScroll ("wrapper");}, 100); } window.addeventListener ("โหลด", โหลด, เท็จ); </script>ในกรณีนี้ ISCroll จะเริ่มต้นหลังจากทรัพยากรหน้า (รวมถึงรูปภาพ) ถูกโหลด 100ms นี่ควรเป็นวิธีที่ค่อนข้างปลอดภัยในการโทร IsCroll
(3) การเริ่มต้นของอินไลน์
สถานการณ์นี้จะถูกเรียกเมื่อหน้าถูกโหลดลงใน JS ไม่แนะนำวิธีนี้ แต่ JavaScript Bigwigs จำนวนมากใช้วิธีนี้ ฉันต้องไม่เห็นด้วยเหตุผลอะไร?
<script src = "iscroll.js"> </script> <div id = "wrapper"> <ul> <li> </li> ... </ul> </div> </lipper> var myscroll = new iScroll ("wrapper"); </script>อย่างไรก็ตามขอแนะนำให้คุณใช้วิธีการพร้อมเฟรมเวิร์กบางอย่างเพื่อโทรหา isCroll (เช่น ready () ใน jQuery) อย่างปลอดภัย
พารามิเตอร์ที่ส่งผ่านใน Iscroll
พารามิเตอร์ที่สองใน ISCroll ช่วยให้คุณปรับแต่งเนื้อหาบางส่วนเช่นรหัสต่อไปนี้:
<script> var myscroll = new iScroll ("wrapper", {hscrollbar: false, vscrollbar: false}); </script>พารามิเตอร์ที่สองมักเป็นวัตถุ ตัวอย่างเช่นแถบเลื่อนไม่แสดงในตัวอย่างด้านบน พารามิเตอร์ที่ใช้กันทั่วไปมีดังนี้:
HSCroll FALSE ห้ามการเลื่อนการเลื่อนในแนวนอนจริงการเลื่อนการเลื่อนแนวนอนจริงเป็นค่าเริ่มต้นเป็น TRUE
vscroll false false refined scroll true แนวตั้งค่าเริ่มต้นเริ่มต้นเป็น TRUE
hscrollbar false ซ่อนแถบ scrollbars ในทิศทางแนวนอน
vscrollbar false hide scrollbar ในทิศทางแนวตั้ง
คงที่ crollbar บนระบบ iOS เมื่อองค์ประกอบการลากเกินขอบเขตของผู้เลื่อนแถบเลื่อนจะหดตัว ตั้งค่าเป็นจริงเพื่อป้องกันไม่ให้แถบเลื่อนเกินกว่าผู้เลื่อน
พื้นที่ที่มองเห็นได้ของนักเลื่อน ค่าเริ่มต้นเป็นจริงบน Android และ False บน iOS
Fadescrollbar False ระบุเพื่อซ่อนแถบเลื่อนเมื่อไม่มีเอฟเฟกต์ซีดจาง
Hidescrollbar ซ่อนแถบเลื่อนเมื่อไม่มีการโต้ตอบของผู้ใช้ค่าเริ่มต้นเป็นจริง
การตีกลับเปิดใช้งานหรือปิดการตีกลับของขอบเขตค่าเริ่มต้นเป็นจริง
โมเมนตัมเปิดใช้งานหรือปิดใช้งานความเฉื่อยค่าเริ่มต้นเป็นจริงพารามิเตอร์นี้มีประโยชน์มากเมื่อคุณต้องการบันทึกทรัพยากร
Lockdirection False ยกเลิกการล็อคทิศทางการลากการลากจริงสามารถอยู่ในทิศทางเดียวเท่านั้น (ขึ้น/ลงหรือซ้าย/ขวา)
ความสำเร็จของเอฟเฟกต์ต่างๆ
Scroll Refresh 'Pull To Refresh' Demo
เอฟเฟกต์นี้ได้รับความนิยมอย่างมากตั้งแต่ Twitter และแอปท้องถิ่นของ Apple บางตัวปรากฏขึ้น คุณสามารถดูที่นี่
ในเวอร์ชันล่าสุดผู้เขียนจะแยกส่วน "Pull to Refresh" เป็นปลั๊กอินเพิ่มเติมสำหรับ Iscroll คุณสามารถคลิกที่นี่เพื่อดูว่าการดึงรีเฟรชทำงานอย่างไร สิ่งที่คุณต้องทำคือปรับแต่งวิธีการ pulldownaction () คุณอาจต้องการ Ajax ในการโหลดเนื้อหาใหม่ แต่อย่าลืมเรียกรีเฟรชเมื่อต้นไม้ DOM เปลี่ยนไป ควรจำไว้ว่าในตัวอย่างเราเพิ่มการหน่วงเวลา 1 วินาทีเพื่อจำลองเอฟเฟกต์การหน่วงเวลาของเครือข่าย แน่นอนถ้าคุณไม่ต้องการใช้ความล่าช้านี้เพียงแค่ลบวิธี SettimeOut
ซูม (หยิก / ซูม) 'ดึงไปรีเฟรช' สาธิต '
เราต้องเผชิญกับความจริงที่ว่าการกลิ้งนั้นไม่มีอะไรใหม่ นี่คือเหตุผลว่าทำไมใน Iscroll 4 เวอร์ชันนี้เราอนุญาตให้คุณใส่มัน
ใหญ่และหดตัว หากต้องการต้องการฟังก์ชั่นนี้คุณจะต้องตั้งค่าพารามิเตอร์ซูมเป็นจริงเพื่อใช้ท่าทางเพื่อซูมเข้าและออก คุณสามารถดูที่นี่
ดับเบิลคลิกที่ซูมเข้าและออกได้รับการสนับสนุนใน Iscroll 4 เพื่อใช้ฟังก์ชั่นซูมคุณต้องมีการกำหนดค่าอย่างน้อยต่อไปนี้:
var myscroll = new iScroll ("wrapper", {zoom: true});
หากคุณต้องการปรับแต่งฟังก์ชั่นการซูมในเชิงลึกคุณสามารถใช้ตัวเลือกต่อไปนี้:
ZOOMMAX ระบุหลายค่าสูงสุดที่อนุญาตการขยายค่าเริ่มต้นคือ 4
[หมายเหตุ]: หากคุณต้องการให้การปรับขนาดภาพมีประสิทธิภาพคุณควรใส่ไว้ในเลเยอร์การสังเคราะห์ฮาร์ดแวร์ ในแง่ของคนธรรมดามันคือการใช้ -webkit -transform: Translate3d (0,0,0) ในองค์ประกอบ IMG ทั้งหมดที่ต้องปรับขนาด และเป็นสิ่งสำคัญอย่างยิ่งที่การเร่งความเร็วฮาร์ดแวร์จะใช้ทรัพยากรจำนวนมากและควรใช้ด้วยความระมัดระวังมิฉะนั้นแอปพลิเคชันของคุณอาจพัง
การสาธิต Snap and Snap to Element 'Carousel'
ฟังก์ชั่น SNAP คือการพิจารณาว่าองค์ประกอบเลื่อนไปยังตำแหน่งที่ระบุหรือไม่ เอฟเฟกต์นี้ช่วยให้คุณสามารถสร้างเอฟเฟกต์กระโจมแฟนซี
ปลั๊กอินจะวิเคราะห์องค์ประกอบของฉลากเดียวกันโดยอัตโนมัติหรือขนาดเท่ากันในพื้นที่เลื่อนเป็นวัตถุจับภาพและคุณยังสามารถระบุวัตถุที่จับได้ผ่านพารามิเตอร์
var myscroll = new iScroll ("wrapper", {snap: true, momentum: false, hscrollbar: false, vscrollbar: false});คุณสามารถตั้งค่าวัตถุ SNAP ได้โดยการตั้งค่าพารามิเตอร์ SNAP เป็นแท็กที่ระบุ ตัวอย่างเช่นจับแท็ก LI
var myscroll = new iScroll ("wrapper", {snap: "li", โมเมนตัม: false, hscrollbar: false, vscrollbar: false});ในตัวอย่างนี้ตัวเลื่อนสามารถจับองค์ประกอบ LI ซ้ายบนสุดในพื้นที่เลื่อน
แถบเลื่อนที่กำหนดเอง
ใน Iscroll 4 ชุดของ CSS สามารถใช้ในการปรับแต่งการแสดงผลของแถบเลื่อน คุณสามารถเพิ่มพารามิเตอร์คลาสลงในแถบเลื่อนดังนี้:
var myscroll = ใหม่ iscroll ("wrapper", {scrollbarclass: "myscrollbar"});ควรสังเกตว่าแถบเลื่อนประกอบด้วยสององค์ประกอบ: คอนเทนเนอร์และจอแสดงผล คอนเทนเนอร์มีความสูงเท่ากับ wrapper ในขณะที่จอแสดงผลแสดงถึงแถบเลื่อน
โครงสร้าง HTML ของแถบเลื่อนมีดังนี้:
<div> <div> </div> </div> .MyScrollBarv {ตำแหน่ง: Absolute; Z-Index: 100; Width: 8px; Bottom: 7px; Top: 2px; ขวา: 1px; } .MyScrollBarv> div {ตำแหน่ง: สัมบูรณ์; z-index: 100; ความกว้าง: 100%; / * ต่อไปนี้อาจเป็นสิ่งที่คุณต้องการปรับแต่ง */พื้นหลัง: -webkit-Gradient (เชิงเส้น, 0 0, 100% 0, จาก (#f00), ถึง (#900)); ชายแดน: 1px ของแข็ง#800; 1px 1px 0 RGBA (255,255,255,0.5); -วิธีการทั่วไป:
(1) รีเฟรชวิธีนี้ควรเรียกเมื่อต้นไม้ DOM เปลี่ยนไป
เช่น: settimeout (function () {myscroll.refresh ();}, 0);
(2) Iscroll ยังมีสามวิธี: Scrollto, Scrolltoelement และ Scrolltopage เพื่อให้คุณสามารถควบคุมเอฟเฟกต์การเลื่อนผ่าน JavaScript
Scrollto (x, y, เวลา, ญาติ): ให้เนื้อหาแถบม้วน x/y ตำแหน่งภายในเวลาที่กำหนด ตัวอย่างเช่น myscroll.scrollto (0, -100, 200) เลื่อนลง 100 พิกเซลใน 200 มิลลิวินาที myscroll.scrollto (0, 10, 200, true) สามารถบรรลุผลของการเลื่อน 10 พิกเซลบนแกน y ภายใน 200 มิลลิวินาทีเมื่อเทียบกับตำแหน่งปัจจุบัน
ScrolltoElement (องค์ประกอบเวลา): เลื่อนไปที่องค์ประกอบที่ระบุภายในเวลาที่กำหนด ตัวอย่างเช่น myscroll.scrolltoelement ('li: nth-child (10)', 100) เลื่อนไปยังตำแหน่งขององค์ประกอบ Li 10 ภายใน 100 มิลลิวินาที พารามิเตอร์แรกสามารถใช้ในการกรององค์ประกอบด้วยตัวเลือกใน CSS3
Snaptopage (Pagex, Pagey, Time): เลื่อนจากหน้า 1 ถึงหน้า 2 ใน 200 มิลลิวินาที (0 แสดงหน้า 1, 1 แสดงหน้า 2) ฟังก์ชั่นนี้สามารถเรียกได้เมื่อใช้ฟังก์ชัน SNAP
(3) Detroy () กำจัด myscroll อย่างสมบูรณ์และพื้นที่หน่วยความจำที่ถูกครอบครอง
เช่น Myscroll.destroy ();
myscroll = null;
ทิศทางการพัฒนาของ isCroll
การสนับสนุนโดเมนแบบฟอร์ม
การเพิ่มประสิทธิภาพการปรับขนาด
ความเข้ากันได้ของเบราว์เซอร์เดสก์ท็อปที่ดีขึ้น
การเพิ่มประสิทธิภาพของเหตุการณ์ onscrol
การเปลี่ยนแปลงในการเพิ่มค่าแฮช
รีเฟรชอัตโนมัติหลังจากการเปลี่ยนแปลง DOM