制作弹窗新玩法，轻松搞定趣味交互

预览效果

实现逻辑

在动态面板中进行弹窗设计，并通过选项卡与动态面板的交互实现弹窗效果。

操作步骤

3.1 使用【选项卡】，配置好需要点击的按钮

首先在【选项卡】-【样式】-【全局】中配置好“网格布局”，因为总共有5个按钮，所以这里配置了5列。

然后在【选项卡】-【数据】中填充对应的数据：默认按钮为4个，而我们要5个按钮，需要在【数据】中进行补充。另外，可以在【数据】中修改按钮的文字，方便后续操作。

[  {    "s": "1",    "content": "气象观测"  },  {    "s": "2",    "content": "数据收集"  },  {    "s": "3",    "content": "数据加工"  },  {    "s": "4",    "content": "综合分析"  },  {    "s": "5",    "content": "气象发布"  }]

如何让按钮对应上背景特定的位置呢？

在【样式】-【系列】-【数据系列】中，添加5个【系列】，字段s的值分别对应五个按钮，调整【整体偏移】，修改每个按钮（单个按钮对应单个系列）整体偏移的位置。

文字底下的小图标也可以在背景中上传自定义图片。

3.2 进入【动态面板】配置弹窗

首先在动态面板中增加6个状态（包含空状态），其次上传需要展示的界面，包含背景、装饰、视频（动画效果）、文字等。调整对应需要展示的位置。

然后将装饰的分组选择“默认隐藏”（此处将icon、视频、装饰分组分开的原因是为了后续的展示效果有递进渐出的效果）。

3.3 给【选项卡】配置自定义事件

退出动态面板，在【选项卡】-【交互】-【自定义事件】中配置5个事件（对应5个弹窗），每个事件中都包含3个动作和1个条件。

事件类型选择“状态改变”，条件为s=1（这里为事件1的条件，事件2的条件对应s=2，以此类推），然后开启“自动模式”。

三个动作配置如下，其他事件同理（记住要对应到各自的动态面板页面哦）。