用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

天下雪 2017-3-24 00:00

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

作者:秀杰,来自授权地址 

效果图

场景

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

思路:

  1. 先画一个scrollView 2 装进canvas
  2. lineTo画刻度线段,lineTo+fill画出三角形游标,fillText描绘文本标签
  3. 通过bindscroll监听刻度尺触摸事件
  4. 渲染取值到页面

基本布局

<scroll-view scroll-x="true" bindscroll="bindscroll">
    <canvas canvas-id="canvas" id="canvas"></canvas>
</scroll-view>

实现bindscroll方法

bindscroll:  
                 
                邀请 
鲜花
鲜花 (3)
鸡蛋
鸡蛋

刚表态过的朋友 (3 人)

分享至 : QQ空间
收藏
原作者: 秀杰 来自: 授权地址

相关阅读