寫了一個(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
https://www.jb51.net/jiaoben/514412.html
注：存在問題
組件使用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ù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
