# 动态面板学习笔记
# 轮播图制作
# 通过单击不同圆点实现banner切换
- 添加动态面板、圆形元素
- 设置面板状态
双击动态面板可以添加或者删减状态state,单击单个面板也可以对他进行编辑
进入state进行编辑,可以对当前状态进行内容编排 - 添加动作
点击圆形->交互->鼠标单击时->设置面板状态->勾选相应动态面板->选择状态选择与圆点对应的状态state->可选择进入动画时间->确定 - 重复操作使所有圆点设置完毕
# 通过单击上一页/下一页实现banner的切换
- 在上一操作基础上添加矩形元素作为按键
- 添加动作:以下一页为例
点击矩形->交互->鼠标单击时->设置面板状态->勾选相应动态面板->选择状态选择Next->向后循环->设置进入动画->确定 - 上一页设置相同,但选择状态时选择Previous
# 向左/右滑动实现banner变化
- 点击轮播图->交互->向左滑动结束时->设置动态面板->勾选相应动态面板->选择状态选择Next->向后循环->设置进入动画
# 轮播图自动播放
- 添加动作
新Case在向左滑动的基础上
勾选向后循环、循环间隔->设置时间->勾选首个状态延时
# 自动播放与上一页/下一页按钮的兼容
- 复制自动播放的Case粘贴到下一张的Case下面即可
# 页面切换
# 图形分析
- 上下滑动:一个页面的内容可能会很长,但是state只会显示这个页面的部分,通过上下滑动来实现页面转换
- 左右滑动:一般伴随tab的切换,左右滑动实际上就是state的切换
# 内容设置
- 动态面板一:内容,此处设置三个state
- 动态面板二:Tab,对应也设置三个state
# 上下滑动设置
- 将三个内容分别添加到三个state上面
- 点击内容动态面板->拖动时->设置面板状态->添加条件->选择面板状态==对应的state
- 选择内容动态面板下与之对应的矩形框->垂直移动
- 添加边界->顶部小于0;底部大于页面最大高度(确保上下端滑动时不会露白)
# 左右滑动设置
以向左滑动为例
- 选择内容动态面板->选择Next状态->设置进入动画
- 选择tab动态面板->选择Next状态->进入动画选择None