Axure教程—分段滑动条

本文将教大家如何用AXURE中动态面板制作单分段滑动条
一、效果
在这里插入图片描述

预览地址:https://c00qrq.axshare.com
下载地址:https://download.csdn.net/download/weixin_43516258/87881401?spm=1001.2014.3001.5503
二、功能
滑块滑动到相应的浮点,显示其值。

三、制作
1、滑动条
拖入一个动态面板,双击进入动态面板,拖入一个矩形制作滑动条,命名为灰色背景,其大小为600×8,如图:
在这里插入图片描述
2、浮点
在滑动条上加入6个原型浮点,其大小为12×12,分别命名为:浮点1、浮点2、浮点3、浮点4、浮点5、浮点6,两个浮点的间距为120,在滑动条下方加入6个矩形,其大小为120×40,分别是浮点的刻度,如图:
在这里插入图片描述
3、滑块
在浮点6处拖入一个动态面板,命名为滑块,在面板里制作滑块,如图:
在这里插入图片描述
4、数值
在浮点6的上方,拖入一个动态面板,命名为数值,如图:

在这里插入图片描述
在状态1中设置数值并命名为数值1,如图:
在这里插入图片描述
在状态2中设置数值并命名为数值2,如图:

在这里插入图片描述
最终设计如图:
在这里插入图片描述
四、交互设置
1、浮点
浮点1鼠标点击时设置,如图

在这里插入图片描述
浮点2鼠标点击时设置,如图:
在这里插入图片描述
浮点3鼠标点击时设置,如图:
在这里插入图片描述

浮点4鼠标点击时设置,如图:
在这里插入图片描述

浮点5鼠标点击时设置,如图:
在这里插入图片描述

浮点6鼠标点击时设置,如图:
在这里插入图片描述
2、滑块
滑块鼠标按下时、鼠标松开时、鼠标移动时设置,如图:
在这里插入图片描述
整个设计制作完毕

猜你喜欢

转载自blog.csdn.net/weixin_43516258/article/details/131109785