uniapp开发h5 遇到一个刻度尺的需求 实现记录

先上最终实现图

uniapp开发h5 遇到一个刻度尺的需求 实现记录_第1张图片

实现这个功能使用的是github上找的一个库 叫slide-ruler  地址

实现思路:

第一步:在终端npm 下载这个依赖

第二步:新建一个刻度尺自定义组件,如果不是自定义组件会不生效,并且这个自定义组件里面放一个空div,要和文档里面一毛一样。

第三步:建议阅读这个中文文档 查看配置项

下面是我项目中用到的配置项:

uniapp开发h5 遇到一个刻度尺的需求 实现记录_第2张图片

遇到的难点:因为项目需求是不仅要滑动这一个交互,还多了一个加减号的按钮,经过查看源码发现,new SlideRuler 用一个变量接收,然后通过这个变量就可以访问class类中的方法,关键类方法是dreawCanvas方法,所以我在点击加减按钮后,除了让value 加加减减,然后需要将这个加加减减后的值重新赋值给 option的currentValue,然后再调用dreawCanvas重新渲染canvas。下面是代码

uniapp开发h5 遇到一个刻度尺的需求 实现记录_第3张图片

你可能感兴趣的:(uniapp开发h5,uni-app)