企业官网建设流程全解析

一、页面元件准备

1. 拖拽动态面板到画布，命名为tab_panel，设置足够宽高用来承载各个 Tab 内容。
2. 双击动态面板，新建多个状态，分别命名，例如tab1首页、tab2列表、tab3设置，每个状态内放入对应页面的内容。

3. 在页面上制作 Tab 导航按钮：放置 3 个矩形 / 按钮，分别命名【首页】【列表】【设置】， 作为切换点击按钮。

小技巧：可以做两套样式，一套选中高亮，一套默认灰色，用来实现 Tab 选中效果。

二、交互设置（核心）

1. 第一个 Tab 按钮【首页】

给按钮添加鼠标单击时事件：

1. 设置面板状态：tab_panel→切换到状态tab1首页，动画选无（Tab 切换一般不用动画）

2. 设置元件样式：将当前按钮设置为选中样式；另外两个 Tab 按钮恢复默认样式。

2. 第二个 Tab 按钮【列表】

鼠标单击时：

1. 设置面板状态：tab_panel切换到tab2列表
2. 设置元件样式：本按钮高亮，其余两个按钮取消高亮。

3. 第三个 Tab 按钮【设置】

鼠标单击时：

1. 设置面板状态：tab_panel切换到tab3设置
2. 设置元件样式：本按钮高亮，其余两个按钮取消高亮。

三、初始化页面效果

页面载入时交互：

• 设置tab_panel默认显示第一个 Tab 状态tab1首页
• 将【首页】按钮设置为选中高亮，其他导航按钮默认样式。

四、预览测试

按 F8 预览，点击不同 Tab 按钮，动态面板切换对应状态，完成 Tab 切页。

常见踩坑点

1. 动态面板状态名字必须和交互里选择的完全一致，大小写、文字不能错，否则切换无效。
2. Tab 按钮的选中样式，要提前在元件属性里设置好【选中】状态的外观。
3. 动态面板大小要把所有内容完整包住，否则内容会被裁切。