微信小程序实现带刻度尺滑块功能

摘要: 与自带的slider不同的是，它是通过手势滑动标尺得到取值，而不是通过滑动滑块本身。

效果图

场景

当一屏显示不下，例如年龄体重选择，金额选择等大区间需要的选择器，相比自带的picker要直观一些。

思路：

先画一个scrollView 2 装进canvas

lineTo画刻度线段，lineTo+fill画出三角形游标，fillText描绘文本标签

通过bindscroll监听刻度尺触摸事件

渲染取值到页面

基本布局

实现bindscroll方法

描绘刻度

遍历刻度

切记要调用context.beginPath();

描绘游标

画带一个绿色的正三角形作为游标，注意游标是悬浮不动的，所以另起一个cancas来装它。当然它不是必须的，偷个懒ps一张三角形的png代替也无妨，甚至刻度其实也可以用

定义刻度默认初值

绑定scroll-left参数，相当于iOS里了UIScrollView的contentOffset，手动让偏移到默认初值对应的坐标位置。

适配最小值

当业务场景需要做数据验证，例如金额要>0，年龄要大于18岁等，就得适配极值。

同时要修正刻度线的x轴坐标

最终js代码

以上所述是小编给大家介绍的微信小程序实现带刻度尺滑块功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!