最近需要用到一个 刻度选择的一个组件，真是翻遍了全网，都没有找到合适的这种刻度尺的做法。索性，干脆自己开发一个吧。既满足自己的要求，也可以作为组件 供大家使用。
在使用之前，先说一下实现思路。首先利用的是canvas 通过传入的值，画出一张图片 。其实滚动的是这张图片
1.引入组件 wx-scale 假设您当前的目录跟我一样是这样
2.canvas.json 中声明使用组件
// canvas
{
"usingComponents": {
"scale":"/components/wx-scale/wx-scale"
}
}
- 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.参数说明
| 参数名 | 默认值 | 说明 |
|---|---|---|
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 组件 : 代码下载
如果觉得有用，就给颗星吧 点我点我点我
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent