Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

ruhetiaozhengshushi

如何通过拖动滑杆上的按钮,调整数值?

这种部件常见于调节音量大小、色彩值等数值类型的设置。我们来分解一下部件构成,看看如何实现。

声音设置示例

点击这里查看在线演示

1、部件分解

这样的部件主要由三个部分组成,一个滑杆轨道,一个用来调节的按钮,还有一个是什么呢?对了就是拖动的进度,因为axure里的部件不支持设置部分填充,所以这里会用另一个大小相同的轨道,通过设置不同的填充颜色来表示当前拖动的进度。

滑杆部件的分解

2、动态面板的应用

这里使用动态面板是为了应用它的“Fit to Content”(适应内容)属性,这个属性在应用之后,动态面板中的内容只会在指定大小范围内显示,其它区域不可见。

考虑到拖动的进度最大是轨道长度,最小为0,而为了隐藏在进度小100时的部分,需要将动态面板的“Fit to Content”(适应内容)勾选去掉,这样在超出屏幕之外的内容将不可见。

隐藏不可见部分的内容

最终两个动态面板初始的样子如下:

两个动态面板的初始位置

3、设置动态面板的onDrag事件

动态面板的事件很丰富,拖动事件是其中最重要的事件之一。我们利用拖动事件,来动态显示当前改变值的大小,直观显示。

将滑杆和小按钮转成一个动态面板,移动到内容的最左边,只显示出小按钮,表示当前位置在0。再将该动态面板和滑杆轨道再转成一个外层的动态面板,注意给动态面板起个名字,便于后面选择。

为第一个动态面板添加onDrag事件,选择move操作,在右边选择该动态面板,设置为只沿x轴移动(with drag x),并且在x轴上的移动范围:left>=-300 并且 left<=0。

设置移动并限制移动范围

4、计算进度

因为我们画的轨道宽度并不是刚好100,可能大于或小于100,例如这个例子里,轨道宽度为300,因此我们要根据当前被拖动的动态面板的x位置,来计算在轨道上移动的百分比。公式如下:

[[(100-Math.abs(LVAR1.x)/3).toFixed(0)]]

计算当前进度

使用局部变量LVAR1表示动态面板,这样好取它的x位置。计算方法为根据当前x位置除以3(因为全长300,除以3刚好等于100),注意要用100减掉这个值,而且因为当前位置是负值,所以这里使用了取绝对值(Math.abs(值))的方法去掉负号,最后结果取整(toFixed(0)表示小数位为0,即没有小数)。

5、完成

到这里滑杆调值基本完成了。

知道大致思路后,就可拓展做成你想要的原型效果了,这就要看你的需要啦!

 

本文由 @Axure原型设计工场 原创发布于人人都是产品经理 ,未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 19

登录后参与评论
  1. 用tofixed经常显示4位小数 :arrow: 后来改用了Math.ceil()就好了,也不造啥情况 :?: 有此类问题的小伙伴可以试试

    回复
  2. 作为一个用了axure多年的产品狗也放弃她了, :shock: :shock: :wink: 现在有好的新工具好用多了
    比如mockplus、Principle等等。

    http://www.8kvv.com 上面特别全,建议看看

    回复
  3. 还不错! :razz:

    回复
  4. axure7.0没有设置沿X轴移动的范围,难道是8.0的新功能 :arrow: :arrow: :arrow:

    回复
  5. 啊,7.0打不开源文件,求大神指教

    回复
    1. 回复

      axure8

  6. :cry: 还出现了负值

    回复
  7. [[(100-Math.abs(LVAR1.x)/3).toFixed(0)]],能解释一下这个公式么? :roll: :roll: :roll:

    回复
    1. 回复

      帖子里解释了啊。
      因为当前进度值的位置在最开始显示在动态面板之外,所以它的起始位置是负值,用数学的Math.abs来取绝对值

  8. 第一拖动的时候正常,再往回拖动的时候,拖动轨迹无法回到初始状态 :arrow:

    回复
    1. 回复

      可能是拖动的x值范围超出了设置的范围,处理下超出范围后自动返回就近的坐标

  9. 很想学,可是细节讲的不够清晰

    回复
  10. 讲的不够细致啊

    回复
    1. 回复

      在线演示里可以下载源文件啊,看看源文件吧

  11. 请问axure7 能够实现么?暂时没有更新到8呢 :neutral: :neutral: :neutral:

    回复
    1. 回复

      可以的,没有用到8的什么特性

    2. 回复

      您好,能否麻烦把流程细化一下么?比如0-100,这个数字是如何设置的呢?函数的部分如何输入呢?实在是最近需要,但是除了您的文章没找到滑块滑动数值改变的方式。感谢。

    3. 回复

      在线演示里可以下载源文件啊,看看源文件

  12. 回复
加载中