AXURE-动态面板 - 实践

1.概述

• 动态面板原件，容器类的原件
• 一个动态面板可能有多种状态

               同一时刻只展示一个状态

               默认展示第一个状态

• 主要用于多个状态的切换
• 可拖动

1.1 创建

• 将原件库中的“动态面板”原件，直接拖动到工作区中，创建空白动态面板
• 将页面中原件选中，右键-转为动态面板

1.2 编辑

进入编辑状态

• 双击页面中的动态面板原件，可进入编辑区（以虚线框的方式显示）
• 在概要区中单击需要编辑的状态或者状态中的原件

添加状态

• 在已有的状态中，重复，将已有的状态进行克隆（包括状态里的原件）
• 面板顶部，添加状态

删除状态

修改原件：进入编辑模式后，编辑

1.3样式、属性

样式工具栏：位置、尺寸

检视面板中的样式选项卡：填充、线段、滚动

• 自适应内容：动态面板大小会根据内部原件的尺寸自动调整，不必须添加滚动也能完成显示内容
• 滚动条：

         从不滚动：如果状态中内容超过了动态面板大小，直接裁剪，不显示

         按需滚动：出现水平滚动条、垂直滚动条

         垂直滚动：出现垂直滚动条，水平方向超出的内容直接裁剪不显示

         水平滚动：出现水平滚动条，垂直方向超出的内容直接裁剪不显示

• 100%宽度（仅限浏览器有效）：如果状态中的内容超出了动态面板大小，超出的宽度将在浏览器中完全显现出来，超出高度直接裁剪
• 固定到浏览器：将动态面板固定到浏览器的具体位置，不会随页面滑动而移动
• 从首个状态脱离：从动态面板里的第一个状态中脱离出来，转化为普通原件，同时状态1从动态面板里消失

1.4 事件

应用场景：轮播图、手机滑动、标签控制与拖拽效果等

• 拖动相关事件：因拖动触发的时间
• 滚动相关事件
• 尺寸改变相关事件

2 动态面板示例

2.1显示/隐藏--实现登录

2.2拖动 -实现手机解锁

圆块拖动到手机最右侧，解锁

2.3 文字跑马灯

2.4banner图自动切换

（此处也可以将交互时间放到动态面板上）

2.5 小圆点+箭头+自动轮播   banner

自动轮播：自动轮播的同时，选中对应的小园点

小圆点点击切换图：

小圆点设为选项组

箭头左右切换：

2.6选项卡  多tab功能建立

tips：矩形小技巧