案例14. 动态面板：拖动滑块解锁（1）

案例来源:

淘宝-注册界面

 

案例效果：

• 拖动前：（图1-97）

 

• 拖动中：（图1-98）

 

• 拖动到终点后：（图1-99）

 

 

案例描述：

拖动滑块进行解锁验证。包含以下情形：

• 拖动滑块时，滑块仅允许水平拖动，且不可超出灰色边框两端；
• 拖动滑块时，有绿色的背景随滑块移动；
• 拖动滑块时，如果滑块到达最右端，显示白色文字“加载中”，等待半秒钟后显示白色文字“验证通过”，并且滑块上的图标变为绿色对勾；同时，启用“获取短信验证码”的按钮；
• 拖动结束时，如果滑块未到达最右端，滑块回到拖动前的位置。

元件准备：

• 页面中：（图1-100）

 

• 动态面板“SliderPanel”中：（图1-101）

 

• 动态面板“BackgroundPanel”中：（图102）

包含命名：

• 动态面板（用于拖动）：SliderPanel
• 动态面板（用于显示绿色背景条）：BackgroundPanel
• 矩形（用于滑块形状）：SliderShape
• 矩形（用于绿色背景）：GreenShape
• 矩形（显示验证提示）：CheckTip
• 矩形（用于下一步按钮）：NextButton
• 热区（用于验证触点）：Contact

 

思路分析：

1、本案例比较复杂的就是在同一区域的元件叠放，由最底层开始分别是：

• 灰色矩形，作为模块的背景；
• 动态面板“BackgroundPanel”，绿色矩形“GreenShape”在这个面板的状态中；这两个元件用于呈现绿背景，所以仅在灰色背景之上；
• 透明矩形“CheckTip”，用于显示验证提示；
• 动态面板“SliderPanel”，矩形滑块“SliderShape”；因为元件中只有动态面板才可拖动，所以要将矩形滑块置于其中；
• 热区“Contact”，在整个模块右侧边缘，用于滑块触碰到此元件时，触发验证相关动作。

2、在滑块被拖动时，如果没有触碰到触点元件“Contact”，需要设置滑块为水平拖动，并添加边界限制；（操作步骤1~2）

3、否则（触碰到触点元件“Contact”），需要设置动作：

• 设置元件“CheckTip”的元件文字为“加载中”；（操作步骤3）
• 等待500毫秒；（操作步骤4）
• 设置元件“CheckTip”的元件文字为“验证通过”；（操作步骤5）
• 设置元件“SliderShape”的元件文字为“ ”；（操作步骤6）
• 启用元件“NextButton”。（操作步骤7）

4、滑块拖动结束时，如果没有触碰到触点元件“Contact”，需要设置滑块回到初始位置；（操作步骤8）

5、滑块移动时，设置绿色的背景跟随移动。（操作步骤9）

 

操作步骤：

1、点中动态面板“SliderPanel”，为其【拖动时】事件添加“用例1”，用例中添加条件，判断【元件范围】“SliderPanel”【未接触】【元件范围】“Contact”；

• 条件判断设置：（图1-103）

2、设置满足条件的动作为【移动】“SliderPanel”为【水平拖动】；点击{界限}后方的【添加边界】，设置元件在x轴“80”~“381”的坐标区域内移动；“381”为模块右边界加1的位置，此位置才能够接触到触点元件“Contact”。

• 用例动作设置：（图1-104）

3、添加不满足操作步骤1的条件时，执行的动作为【设置文本】“CheckTip”的元件文字为【富文本】，然后点击【编辑文本】，为元件上显示的文字“加载中”添加样式；

• 用例动作设置：（图1-105）

• 编辑文本设置：（图1-106）

4、添加动作【等待】，{等待时间}“500”毫秒；然后，后执行下一动作；

• 用例动作设置：（图1-107）

5、添加动作【设置文本】“CheckTip”的元件文字为【富文本】，然后点击【编辑文本】，为元件上显示的文字“通过验证”添加样式（参考图1-106）；

• 用例动作设置：（图1-108）

6、添加动作【设置文本】“SliderShape”的元件文字为【富文本】，然后点击【编辑文本】，为元件添加图标字体“ ”；图标字体可通过双击图标字体元件，在编辑状态下复制获得；

 

• 用例动作设置：（图1-109）

• 编辑文本设置：（图1-110）

 

7、在元件“NextButton”属性中为元件添加【禁用】状态的交互样式，并勾选默认的【禁用】选项；然后，继续上一步，添加动作【启用】元件“NextButton”；

• 用例动作设置：（图1-111）

8、为动态面板“SliderPanel”的【拖动结束时】事件添加“用例1”，用例中添加条件，判断【元件范围】“SliderPanel”【未接触】【元件范围】“Contact” （参考操作步骤1）；设置满足条件时的动作为【移动】动态面板“SliderPanel”【到达】{x}“80”{y}“180”的位置；

 

• 用例动作设置：（图1-112）

 

9、为动态面板“SliderPanel”的【移动时】事件添加“用例1”；设置动作为【移动】元件“GreenShape”【跟随】当前动态面板移动；

• 用例动作设置：（图1-113）

 

通过以上步骤，就完成了拖动解锁的全部交互。

• 事件交互设置：（图1-114）

 

 

补充说明：

• 本案例主要讲解动态面板拖动的相关内容，不对其它交互进行描述；
• 本案例中滑块回到原点未添加滑动效果，该效果将在函数案例部分优化；
• 本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。（参考案例1的补充说明）

 特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。

---------------------------------------------------- End ----------------------------------------------------

转载请注明：Axure原创教程网 » AxureRP8实战手册-案例14（动态面板：拖动滑块解锁①）

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>