本次分享的是Axure8制作的列表左右滑动交互效果。

Axure8.0教程:列表左右滑动交互(动态面板、中继器)_Axure动态面板

预览及下载地址:​​https://jlrb3o.axshare.com​

一、制作原型

拖动一个【动态面板】元件命名为内容架构,在动态面板中加入一个中继器,并对中继器中加入一个动态面板命名为“滑动操作”,并对面板进行三个动态设置

Axure8.0教程:列表左右滑动交互(动态面板、中继器)_Axure设计_02

  • 正常状态:

Axure8.0教程:列表左右滑动交互(动态面板、中继器)_Axure中继器_03

  • 向左状态:Axure8.0教程:列表左右滑动交互(动态面板、中继器)_Axure中继器_04
  • 向右状态Axure8.0教程:列表左右滑动交互(动态面板、中继器)_Axure中继器_05此时所有的元件准备就绪,接下来是交互设置

二、交互设置

选择动态面板“滑动操作”,进行“向左拖动结束时”事件和“向右拖动结束时”事件设置

  • 向左拖动结束时Axure8.0教程:列表左右滑动交互(动态面板、中继器)_动态面板_06
  • 向右拖动结束时Axure8.0教程:列表左右滑动交互(动态面板、中继器)_动态面板_07所有的设置完成。