ฉันเขียนสเกลแบบเลื่อนเพื่อใช้บนเทอร์มินัลบนมือถือ ฉันเคยเห็นมันในแอปเนทีฟมาก่อน และมันก็มีรายละเอียดมาก
ผลการดำเนินงานมีดังนี้: (ดูซอร์สโค้ดท้ายบทความ)
ห่อหุ้มเป็น MeasureRuler.js ที่ใช้งานได้โดยตรง
วิธีการโทร:
//เตรียมใช้งานไม้บรรทัด var MeasureRuler =new MeasureRuler({ wrapperId:rulerWrapper, //Container ID, เพียงแค่เขียน DIV บนเพจ (จำเป็น) สูงสุด:2000, //ขนาดสูงสุดของสเกล (ไม่จำเป็น, ค่าเริ่มต้นคือ 2000) minUnit: 1, //สเกลขั้นต่ำของสเกล (เป็นทางเลือก ค่าเริ่มต้นคือ 1) unitSet:10, //ความยาวของหน่วยสเกล (เป็นทางเลือก ค่าเริ่มต้นคือ 10) ค่า:5, //ค่าเริ่มต้น (เป็นทางเลือก ค่าเริ่มต้นคือ 1) mult:1, //ค่าสเกลหลายค่า ค่าเริ่มต้นคือค่าสเกลขั้นต่ำคือ 10px หากตั้งค่า mult เป็น 3 สเกลขั้นต่ำคือ 30px (เป็นทางเลือก ค่าเริ่มต้นคือ 1 ) โทรกลับ: RulerSetValue // ฟังก์ชั่นโทรกลับระหว่างไม้บรรทัดเลื่อน (ไม่จำเป็น) })กำหนดค่าให้กับมาตราส่วน
//กำหนดค่าสเกลเป็น 3 MeasureRuler.setValue(3)
สลับสถานะสเกลเพื่อให้ตรงกับช่วงการวัดที่แตกต่างกัน และวาดสเกลใหม่
//รีเซ็ตพารามิเตอร์ใหม่ var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } // วาดกราฟใหม่ MeasureRuler.reDrawRuler(nParam);การแชร์ซอร์สโค้ด GitHub: (หากคุณพบว่ามีประโยชน์ อย่าลืมให้ดาว)
https://github.com/xingxiaoyiyio/h5-ruler/tree/master
หมายเหตุ: มีปัญหาเกิดขึ้นส่วนประกอบใช้เหตุการณ์การสัมผัสเพื่อบันทึกช่วงการเลื่อน แต่เมื่อสเกลขั้นต่ำคือ 1 ซึ่งก็คือ แต่ละสเกลคือ 10px การเลื่อนช่วงเล็ก ๆ จะไม่ถูกต้อง และคุณต้องเลื่อนไปมาอย่างระมัดระวังก่อนจึงจะสามารถเลื่อนไปที่ ขนาดชี้ที่คุณเลื่อนไปที่;
สรุปข้างต้นคือ js ที่บรรณาธิการแนะนำเพื่อใช้ฟังก์ชันการเลื่อนนิ้วบนหน้า H5 บนมือถือ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณ เวลา. ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!