寫了一個(gè)在移動(dòng)端使用的可滑動(dòng)刻度尺，曾經(jīng)在原生App中看到過，做得很精細(xì)，現(xiàn)在用web頁面實(shí)現(xiàn)的；
實(shí)現(xiàn)效果如下：（源碼見文章的最后）
封裝成直接可用的MeasureRuler.js
調(diào)用方法：
//初始化尺子 var measureRuler =new MeasureRuler({ wrapperId:"rulerWrapper", //容器ID，頁面中寫一個(gè)DIV就行 (必須) max:2000, //刻度尺最大的刻度 (非必須，默認(rèn)為2000) minUnit:1, //刻度尺最小刻度 (非必須，默認(rèn)為1) unitSet:10, //刻度尺單元長度 (非必須，默認(rèn)是10) value:5, //初始化數(shù)值 (非必須，默認(rèn)為1) mult:1, //刻度值倍數(shù)，默認(rèn)是最小刻度值為10px，如果定mult為3則最小刻度為30px (非必須，默認(rèn)為1) callback:rulerSetValue //滑動(dòng)尺子過程中的回調(diào)函數(shù) (非必須) }) 給刻度尺賦值
//給刻度值賦值為3 measureRuler.setValue(3)
切換刻度尺狀態(tài),滿足不同量程，重繪刻度尺
//重新設(shè)定新的參數(shù) var nParam={ max:5, minUnit:0.5, unitSet:2, mult:3, value:1.5 } //重新繪制圖 measureRuler.reDrawRuler(nParam); 
GitHub源碼分享：(如果覺得有用記得給個(gè)Star哦)
https://github.com/xingxiaoyiyio/h5-ruler/tree/master
注：存在問題
組件使用touch事件，捕捉滑動(dòng)范圍，但是當(dāng)最小刻度為1時(shí)即每一刻度為10px,小范圍滑動(dòng)得不精準(zhǔn)，需要反復(fù)前后小心滑動(dòng)才能滑到像滑到的刻度點(diǎn)；
總結(jié)
以上所述是小編給大家介紹的js實(shí)現(xiàn)移動(dòng)端H5頁面手指滑動(dòng)刻度尺功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
