幻灯片
- 拖动矩形到页面中》选中矩形以及矩形包含的所有元件》转换为动态面板并命名为幻灯片》添加3个状态
- 进入到状态1设计小圆点的选中效果》设计小圆点的点击事件(鼠标单击时设置面板状态),添加鼠标悬停的样式、设置选中样式
将设计好的状态复制到状态2、3并修改选中圆点
设计页面载入事件》添加“等待”动作》添加“设置面板状态”动作,设置为状态2》添加等待》设置面板状态为3》等待》设置面板状态为1
轮播
-
在上述设计的基础上,清除圆点事件和页面载入事件,保留设计样式。首先给已经设置好选中样式的三个圆点设置“选项组名称”(三种状态保持相同的改变),让圆点只有一个能够被选中
- 设置圆点名称对应为圆点1、圆点2、圆点3“选中时”事件,添加“设置面板状态”动作 》 选择状态为“Value” 》 状态名称或序号进入fx设置为[[This.name.slice(-1)]],即序号为当前状态名称最后一个字符(比如圆点1则取到对应序号1),以达到选择当前状态的效果 》 再添加等待动作,以便进入下一个状态
- 在上述基础上还要设置圆点的选中效果,因为是通过选中实现状态切换,所以设置选中的圆点为第二个,给第二个圆点添加“选中”动作(.同上,设置剩余两个圆点心的“选中时”事件,对于第二个圆点则选中第三个圆点,第三个圆点则选中第一个圆点)
- 对应状态2、状态3也需要与状态一保持一致的设置(建议直接复制状态一,完成动作添加,再修改状态样式)。设置完成之后,给页面设置“载入时”事件,添加“选中”动作选中状态1下的第一个圆点
总结:轮播实现其实就是当页面载入设置圆点1选中》圆点1的选中事件确定面板状态,同时设置选中下一个圆点》循环上述效果