AXURE-031-组件-滑块(Slider)

封面

hi，大家好，我是18岁fantasy。本期小组件为一个滑块效果，主要用到axure的动态面板拖动事件，设置边界条件，数值函数处理（toFixed(decimalPoints)）等知识点。toFixed函数解释如下：

toFixed(decimalPoints)

将一个数字转为保留指定位数的小数，小数位数超出指定位数时进行四舍五入，如果超过实际小数位，则补充0。参数：decimalPoints为保留小数的位数。

例如：[[12.126.toFixed(2)]]  =  1.13；  [[12.126.toFixed(5)]]  =  1.12600；

显示效果：

动效

实现方式

1、图层。元件比较简单，主要由以下几个元件组成，包含圆形和形状组成的动态面板，个轨道矩形组成，这里为什么要用动态面板，而不是组合呢，是应为动态面板才有鼠标拖动跟随事件。

图层

2、事件设置

原理原理如下：

1、设置动态面板拖动时事件，是的动态面板内部元件跟随移动，并在只在X轴跟随移动。

2、设置移动左右便捷，防止滑出滑轨范围。

3、设置数值，通过滑过的距离和滑轨的长度，计算出百分比。

具体如下图所示：

事件设置

~以上便是本次小组件的全部内容~

原件下载

链接：https://pan.baidu.com/s/1L-PVrc8eTYGNIU2TdPzlxw

提取码：9xa9

18岁提示：以上文件完成于axure 9版本。

定期会将组件整理成完整文件统一发布。

原创文章，转载请标明出处。

~感谢阅读和关注~同名公众号，18岁fantasy，欢迎关注！

公众号