微信小程序刻度尺组件

最近需要用到一个 刻度选择的一个组件，真是翻遍了全网，都没有找到合适的这种刻度尺的做法。索性，干脆自己开发一个吧。既满足自己的要求，也可以作为组件 供大家使用。
在使用过程中如果有什么问题的话，在最下面的 [问题答疑] 中寻找问题答案，或者直接发布评论吧，我看到的话会及时解决的

1.先看一下效果

整体来说分为两个模式，一个整数模式，一个小数模式

整数模式.gif

小数模式.gif

刻度除了上面最小单位的展示，还有两种展现方式，两个单位一格，五个单位一格，十个单位一个格

不同刻度展示1.gif

不同刻度展示2.gif

可以改变大小，颜色

不同颜色大小展示.gif

2.用起来

在使用之前，先说一下实现思路。首先利用的是canvas 通过传入的值，画出一张图片 。其实滚动的是这张图片

1.引入组件 wx-scale 假设您当前的目录跟我一样是这样

image.png

2.canvas.json 中声明使用组件

// canvas
{
  "usingComponents": {
    "scale":"/components/wx-scale/wx-scale"
  }
}

3. canvas.wxml 中使用组件

刻度{{value}} 

3.参数说明

参数名	默认值	说明
min	0	最小值
max	100	最大值
int	true	是否开启整数模式 ，false为小数模式 整数模式 step最小单位是 1 ，小数模式，step的最小单位是 0.1
step	1	步长，相对传入的值，每个格子代表几个值（值只能是能被10整除的 整数 ，1，2，5, 10）
fiexNum	60	刻度尺左右余量
single	10	单个格子的实际长度（单位px）一般不建议修改
h	80	自定义高度
active	center	自定义选中位置 （三个值 min, max ,center , 范围内合法数值）
styles	{...}	自定义卡尺颜色 注意： 仅支持 #dbdbdb 或者red 这种 颜色 不支持简写 如 #333

// 参数styles 的默认值
styles = {
  line: '#dbdbdb',   // 刻度颜色
  bginner: '#fbfbfb',  // 前景色颜色
  bgoutside: '#dbdbdb',  // 背景色颜色
  lineSelect: '#52b8f5',  // 选中线颜色
  font: '#404040'   // 刻度数字颜色
{

4.事件

事件名	返回值	说明
bindvalue	当前选择刻度	返回当前选择刻度

Page({
  data: {
    value: 0,
    styles: {
      line: '#dbdbdb',
      bginner: '#fbfbfb',
      bgoutside: '#dbdbdb',
      lineSelect: '#52b8f5',
      font: '#404040'
    }
  },
  bindvalue: function (e) {
    // console.log(e)
    this.setData({
      value: e.detail.value
    })
  }
})

以上，就是组件的时候方法了，如果使用过程中，有问题可以联系我。

wx-scale 组件 : 代码下载

image.png

如果觉得有用，就给颗星吧 点我点我点我

问题答疑

1. 在开发工具中只正常显示第一个组件刻度图片，这是一个编辑器已知问题 ，在手机中不影响使用

2. 部分手机会显示滚动条 ，在父页面（使用组件页面）wxss 中添加如下样式，组件样式添加无效

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}

3. 关于遮罩问题 ，在这不解答。自己动手写一下吧，没问题的

4. 动态赋值的变量，最好不要与bindvalue 事件返回的值 使用同一个变量

因为动态赋值监听 到新值之后 ，是要改变滚动组件的位置的，这时候如果使用同一个变量，会多次触发动态赋值，所以不建议使用同一个变量

image.png

5. 因为性能问题 ，不能连续滑动 ，请等待第一次 归位之后，在进行第二次滑动。因为每次归位有一个200ms的等待时间，待优化问题

6. 因为组件是canvas 绘制 ，建议 给的 最大值，最小值 ，不要太过分，否则会不能显示 ，暂时没有测试边界

更新日志

v1.0.1 (2018-12-12更新)

1.修复一屏多组件问题 ，可以同一个页面使用多个组件了。

2. 添加动态赋值的功能，修改active属性即可，注意获取到的值 和动态赋值 不要使用同一个变量