中国网络重庆seo培训

今天和大家分享的Axure案例是折叠面板

折叠面板是移动端APP中常见的组件之一，有时候也称之为手风琴。咱们先看下Axure画出的折叠面板原型效果，然后再对该组件进行详细讲解。

一、功能介绍

折叠或展开多个面板内容，默认为展开一项内容，点击任一收起的选项，展开面板，点击已展开的选项，收起面板

二、制作过程

1、制作原型

原型是由矩形组件以及动态面板构成，

拖入三个矩形组件分别命名为“1”、“2”、“3”，双击矩形输入相应的文字，在三个矩形中分别拖入三个动态面板，分别命名为”箭头1“、”箭头2“和”“箭头3”，每个动态面板中为两个状态，分别加入“上”和“下”两个箭头标识，在每个矩形下方拖入分别拖入动态面板，分别命名为“1”、“2”、“3”，在动态面板中输入内容，如图：

2、交互设计

（1）矩形“1”交互设置

点击矩形“1”对其“鼠标点击时“设置选中状态为”toggle“,

“选中改变时”设置

if 选中状态于 This == true

显示动态面板“1”，动画为向下滑动，时间为100ms，更多选项为推动元件，方向为下方，动画为线性，时间为100ms

设置动态面板“箭头1”为下，显示其面板，

if 选中状态于 This == false

隐藏动态面板“1”，动画为向上滑动，时间为100ms，拉动元件，方向为下方，动画为线性，时间为100ms

设置动态面板“箭头1”为上，显示其面板

（2）矩形“2”交互设置

点击矩形“2”对其“鼠标点击时“设置选中状态为”toggle“,

“选中改变时”设置

if 选中状态于 This == true

显示动态面板“2”，动画为向下滑动，时间为100ms，更多选项为推动元件，方向为下方，动画为线性，时间为100ms

设置动态面板“箭头2”为下，显示其面板，

if 选中状态于 This == false

隐藏动态面板“2”，动画为向上滑动，时间为100ms，拉动元件，方向为下方，动画为线性，时间为100ms

设置动态面板“箭头2”为上，显示其面板

（3）矩形“3”交互设置

点击矩形“3”对其“鼠标点击时“设置选中状态为”toggle“,

“选中改变时”设置

if 选中状态于 This == true

显示动态面板“3”，动画为向下滑动，时间为100ms，更多选项为推动元件，方向为下方，动画为线性，时间为100ms

设置动态面板“箭头3”为下，显示其面板，

if 选中状态于 This == false

隐藏动态面板“3”，动画为向上滑动，时间为100ms，拉动元件，方向为下方，动画为线性，时间为100ms

设置动态面板“箭头3”为上，显示其面板

下载地址：https://download.csdn.net/download/weixin_43516258/88998795