Axure RP 7.0 教程手机左右滑动效果

 时间:2026-02-12 19:15:23

1、步骤1:准备一个系统菜单导航图片,导入一个系统菜单导航栏图片

Axure RP 7.0 教程手机左右滑动效果

2、步骤2:从部件库中拖拽矩形到线框图编辑区中,调整大小,w=360(px);h=615(px);填充颜色,在矩形输入“列表1”,并在“部件交互和注释”窗口中命名为“列表1

Axure RP 7.0 教程手机左右滑动效果

3、步骤3:选中列表1,右击打开快捷菜单,点击“转换为动态面板”

Axure RP 7.0 教程手机左右滑动效果

4、步骤4:双击动态面板,打开“动态面板状态管理”窗口,在“动态面板名称”输入名称“应用列表”,并点击“+”新增两个状态,并分别给3个状态命名为:列表1,列表2,列表3

Axure RP 7.0 教程手机左右滑动效果

5、步骤5:在“动态面板状态管理”窗口中,双击状态“列表2”,打开列表2,参考步骤2,创建列表2,但注意填充不同的颜色,以示区分

Axure RP 7.0 教程手机左右滑动效果

1、步骤6:在“动态面板状态管理”窗口中,双击状态“列表3”,打开列表3,参考步骤2,创建列表3,但注意填充不同的颜色,以示区分

Axure RP 7.0 教程手机左右滑动效果

2、步骤7:回到首页,选中动态面板“应用列表”,双击“部件交互和注释”窗口中的“向左滑动时”事件,打开用例编辑器

Axure RP 7.0 教程手机左右滑动效果

3、步骤8:第二步:点击新增动作—选择“动态面板”,点击“设置面板状态”; 第四步:配置动作—勾选“应用列表(动态面板)”,“选择状态”下拉选择“Next”,“进入时动画”下拉选择“向左滑动”,用时“500”毫秒;“退出时动画”下拉选择“向左滑动”,用时“500”毫秒; 点击“确定”

Axure RP 7.0 教程手机左右滑动效果

4、步骤9:选中动态面板“应用列表”,双击“部件交互和注释”窗口的“向右滑动时”事件,打开用例编辑器

Axure RP 7.0 教程手机左右滑动效果

5、步骤10:第二步:点击新增动作—选择“动态面板”,点击“设置面板状态”; 第四步:配置动作—勾选“应用列表(动态面板)”,“选择状态”下拉选择“Previous”,“进入时动画”下拉选择“向右滑动”,用时“500”毫秒;“退出时动画”下拉选择“向右滑动”,用时“500”毫秒; 点击“确定”

Axure RP 7.0 教程手机左右滑动效果

6、制作完成预览效果

  • 教大家使用Axure制作折叠面板效果
  • Axure如何制作带提示信息的输入框
  • Axure交互如何设置时间类型文本框?
  • 用PS打造神秘魔术光束效果
  • JS如何动态显示当前年月日时分秒?
  • 热门搜索
    蠢蠢欲动的意思 墙绘用什么颜料 后裔是什么意思 平庸的意思 七险一金包括什么 日积月累的意思 什么是白色家电 瘠薄什么意思 恍如隔世的意思 吃水不忘挖井人的意思