모바일 단말기에서 사용하기 위해 슬라이딩 스케일을 작성했습니다. 이전에 기본 앱에서 본 적이 있는데 이제는 웹 페이지에서 매우 상세하게 구현되었습니다.
구현 효과는 다음과 같습니다. (기사 마지막 부분의 소스 코드 참조)
직접 사용 가능한 MeasureRuler.js로 캡슐화됨
호출 방법:
//눈금자 초기화 var MeasureRuler =new MeasureRuler({ WrapperId:rulerWrapper, //컨테이너 ID, 페이지에 DIV 작성(필수) max:2000, //눈금의 최대 눈금(필수는 아님, 기본값은 2000) minUnit: 1, //척도의 최소 눈금(선택, 기본값은 1) unitSet:10, //척도 단위의 길이(선택, 기본값은 10) value: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인 경우 작은 범위 슬라이딩은 정확하지 않으며 앞뒤로 조심스럽게 슬라이드해야 슬라이드할 수 있습니다. 슬라이드하는 축척 지점;
요약위 내용은 모바일 H5 페이지에 Finger Sliding Scale 기능을 구현하기 위해 에디터가 소개한 js입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 답변해 드리겠습니다. 시간. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!