滑动取值器


为了让用户有很好的交互体验,减少输入次数,就做了这么一个滑动取值器,

默认有小时和分钟两种选项,当然还可以自定义选取数值

最初的设计是使用多个简单控件的组合,随后却发现效果非一般地差

最终使用了不停重绘的方式使其变得顺手和流畅

效果如下图

              

包含的功能有:

1.默认小时分钟刻度选择

2.相关动作的监听器

3.代码移动标尺,含动画

4.绘制小刻度开关

5.气泡提醒开关

6.自定义刻度值

......


下载地址:  控件&演示

 

==========Bug修复==========

~>2012-12-18 :changeDefaultType()方法中对markBg添加Null判断,防止第一次加载显示刻度报空

~>2013-01-10 :onLayout()的错误使用导致气泡提示位置不对,通过getLocationOnScreen()修复

==========待优化==========

~>刻度两端未对齐问题

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Echarts中,可以通过dataZoom组件实现滑动事件。dataZoom组件提供了两种类型的滑动事件:slider和inside。 1. slider类型的滑动事件可以通过设置type为'slider'来实现。具体的配置参数包括: - width:滑动条的宽度,可以是像素值或百分比。 - start:滑动条的起始位置,取值范围为0-100。 - end:滑动条的结束位置,取值范围为0-100。 - showDataShadow:是否显示数据阴影,默认为false。 - fillerColor:滑动条的填充颜色。 - borderRadius:滑动条的圆角半径。 - moveHandleSize:滑动条的移动手柄大小。 - moveHandleStyle:滑动条的移动手柄样式。 - left:滑动条的左边距,可以是像素值或百分比。 - height:滑动条的高度。 - handleSize:滑动条的手柄大小。 - handleIcon:滑动条的手柄图标。 - handleStyle:滑动条的手柄样式。 2. inside类型的滑动事件可以通过设置type为'inside'来实现。它可以在图表内部进行滑动,而不需要显示滑动条。 下面是一个示例代码,演示了如何使用dataZoom组件实现echarts的滑动事件[^2]: ```javascript dataZoom: [ { type: 'slider', width: '30%', start: 0, end: 50, showDataShadow: false, fillerColor: 'rgba(64, 158, 255)', borderRadius: '50%', moveHandleSize: 0, moveHandleStyle: {}, left: '35%', height: 12, handleSize: '80%', handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', handleStyle: { borderWidth: 0, color: 'rgba(64, 158, 255)' } }, { type: 'inside' } ] ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值