Axure 9.0 使用动态面板实现 Tab 切页

一、页面元件准备拖拽动态面板到画布命名为tab_panel设置足够宽高用来承载各个 Tab 内容。双击动态面板新建多个状态分别命名例如tab1首页、tab2列表、tab3设置每个状态内放入对应页面的内容。3. 在页面上制作 Tab 导航按钮放置 3 个矩形 / 按钮分别命名【首页】【列表】【设置】 作为切换点击按钮。小技巧可以做两套样式一套选中高亮一套默认灰色用来实现 Tab 选中效果。二、交互设置核心1. 第一个 Tab 按钮【首页】给按钮添加鼠标单击时事件1. 设置面板状态tab_panel→切换到状态tab1首页动画选无Tab 切换一般不用动画2. 设置元件样式将当前按钮设置为选中样式另外两个 Tab 按钮恢复默认样式。2. 第二个 Tab 按钮【列表】鼠标单击时设置面板状态tab_panel切换到tab2列表设置元件样式本按钮高亮其余两个按钮取消高亮。3. 第三个 Tab 按钮【设置】鼠标单击时设置面板状态tab_panel切换到tab3设置设置元件样式本按钮高亮其余两个按钮取消高亮。三、初始化页面效果页面载入时交互设置tab_panel默认显示第一个 Tab 状态tab1首页将【首页】按钮设置为选中高亮其他导航按钮默认样式。四、预览测试按 F8 预览点击不同 Tab 按钮动态面板切换对应状态完成 Tab 切页。常见踩坑点动态面板状态名字必须和交互里选择的完全一致大小写、文字不能错否则切换无效。Tab 按钮的选中样式要提前在元件属性里设置好【选中】状态的外观。动态面板大小要把所有内容完整包住否则内容会被裁切。