可滑动的幻灯片/轮播图 | Swiping Slideshow

在本教程中,你将学习如何制作一个轮播图,横幅或内容幻灯片,并且可以在移动设备上通过左滑右滑进行浏览。【原型预览】

1、元件设置

创建第一屏

  1. 打开一个新的RP文件,并在画布中打开Page 1
  2. 元件面板中拖拽一个矩形元件到画布中,然后在样式面板或样式工具栏中,使用填充颜色选择器将它填充为蓝色。
  3. 在矩形上点击鼠标右键,在弹出的右键菜单中选择转换为动态面板

创建第二屏

  1. 双击动态面板以编辑它的状态。
  2. 在画布的顶部,点击State1,然后在弹出的下拉列表中点击添加状态,然后按回车键创建State2
  1. 拖拽一个矩形元件到State2的画布中,将它放在坐标(0,0)的位置,然后设置它的填充色为红色。

创建第三屏

  1. 重复以上步骤来创建State3,并将它的矩形元件用绿色填充。
  2. 点击画布右上角的关闭或按ESC键退出状态编辑模式。

注意:当你创建自己的轮播图时,你可以在动态面板的状态中放入任何你想要的元件。

2、添加左滑交互
  1. 选中动态面板,点击交互面板中的新建交互
  2. 在弹出的列表中选择向左拖动结束时事件,然后选择设置面板状态动作。
  3. 目标下拉列表中选择当前元件
  4. STATE下拉列表中选择下一项,然后选中向后循环
  5. 进入动画下,选择向左滑动。注意退出动画会自动选择与之匹配的选项。
  6. 点击确定按钮保存操作。
3、添加右滑交互

参照步骤2,使用向右拖动结束时事件,设置面板状态为上一项,然后选择进入动画的方式为向右滑动

4、预览交互

预览页面,向左或向右滑动幻灯片来观看它的每一屏。

提示:如果想在移动设备上预览交互,将你的RP文件上传到Axure云平台上,然后在你的移动设备上打开它的分享链接。你也可以使用Axure Share APP。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。