最近需要用到一个 刻度选择的一个组件，真是翻遍了全网，都没有找到合适的这种刻度尺的做法。索性，干脆自己开发一个吧。既满足自己的要求，也可以作为组件 供大家使用。

在使用过程中如果有什么问题的话，在最下面的 [问题答疑] 中寻找问题答案，或者直接发布评论吧，我看到的话会及时解决的

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

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

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

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

3. canvas.wxml 中使用组件

<!-- -->
<text>刻度{{value}}</text> 

<scale min="0" max="100" int="{{true}}" step="5" fiexNum="60" single="10" h="80" active="min" styles="{{styles}}" bindvalue="bindvalue"></scale>

3.参数说明

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

4.事件

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 组件 : 代码下载

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

#问题答疑

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

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

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