如何进行页面切换

01 预览效果

02 实现逻辑

通过配置自定义事件，实现不同页面组件间的交互效果。

03 操作步骤

3.1 背景搭建

可以在【资源】中选择自己喜欢的元素。

分别在右侧数据栏中设置两个标题组件为“主页面”与“子页面”。（记得及时对左侧的组件进行重命名，方便后续区分）

在样式中将子页面标题【隐藏】。

3.2 主页面搭建

选择需要的子组件搭建【主页面】，同样可以在资源库中寻找。将主页面的所有组件放在一个文件夹中（将组件同时选中，鼠标右击，选择【成组】即可）。

双击左侧分组，可以对分组重命名，方便后续操作。

3.3 子页面搭建

将鼠标悬浮在主页面分组栏上，点击小眼睛，暂时隐藏主页面所有元素，方便后续搭建子页面。（搭建好子页面后记得打开小眼睛）

搭建自己需要的子页面，同样将其放入一组中。

设置成组后，在图层中选中，在【组配置】中设置【默认隐藏】。

同理可以将子页面分组重新命名。

3.4 关闭按钮配置

导入/选择需要的按钮组件，可以在资源库中寻找，也可以自行导入。

同样设置成【默认隐藏】。

3.5 配置主页面切换至子页面的效果

在图层中选中【绿色】（主页面需要用来切换的按钮）。点击【交互】→【自定义事件】→【＋】。添加事件1，事件类型设置为【鼠标点击】。

动作1：配置点击主页面绿色按钮【隐藏主页面】的动作。选择组件【主页面】、【主页面标题】。动作为【隐藏】，动画时长根据喜好选择。

动作2：配置点击主页面绿色按钮【出现子页面】的动作。选择组件【子页面标题】、【关闭】、【子页面】。动作为【显示】，动画时长根据喜好选择。

3.6 配置子页面切换至主页面的效果

在图层中选中【关闭按钮】。点击【交互】→【自定义事件】→【＋】。添加事件1，事件类型设置为【鼠标点击】。

动作1：配置点击关闭按钮【隐藏子页面】的动作。选择组件【子页面标题】、【关闭】、【子页面】。动作为【隐藏】，动画时长根据喜好选择。

动作2：配置点击关闭按钮【出现主页面】的动作。

选择组件【三色指标数据】（主页面）、【主页面标题】。动作为【显示】，动画时长根据喜好选择。