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

1.先看一下效果

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

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

可以改变大小，颜色

2.用起来

在使用之前，先说一下实现思路。首先利用的是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 组件 : 代码下载

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