微信小程序刻度尺组件

96
meHaoTian
0.1 2018.03.17 16:21* 字数 752

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

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"
  }
}
  1. 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 组件 : 代码下载

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属性即可,注意获取到的值 和动态赋值 不要使用同一个变量
WeChat