Axure设计之左右滚动组件教程（动态面板）

• 花匠小妙招
• 2024-11-08 14:15

很多项目产品设计经常会遇到左右滚动的导航、图片展示、内容区域等，接下来我们用Axure来实现一下左右滚动的菜单导航。通过案例我们可以举一反三进行其他方式的滚动组件设计，如常见的上下滚动、翻页滚动等等。

一、效果展示：

1、点击“向左箭头”菜单导航向左移动，继续点击直到右侧显示全最后一个菜单时结束移动；

2、点击“向右箭头”菜单导航向右移动，继续点击直到左侧显示全第一个菜单时结束移动；

3、点击菜单，菜单置为选中状态，相应内容区域根据菜单切换；

效果预览：http://左右滚动菜单导航

二、设计思路

1、使用动态面板来控制菜单导航的显示区域；

2、左右滚动是通过元件动作“移动”来实现，通过设置“向左/向右箭头”控制移动对象的坐标；

3、设置好“移动”动作，还需要设置边界来控制移动的范围。

知识补充：

移动的方式可以选择： 到达：指定移动到某个位子，这就需要在后面输入移动到的坐标。经过：指定移动的距离，最后移动结果是当前元件的坐标位置（左上端点的坐标）加上后面设置的坐标值。 无论偏移、尺寸都是以坐标值来展示，坐标值可正、可负。X轴为负则向左移动，Y轴为负数则向上移动。设置边界，是设置可移动范围，边界设置后，元件不能移动到边界之外。

三、关键步骤

1、添加好全部菜单导航并添加组合，将组合转换为动态面板命名为“内部动态面板”，设置如下图：

2、再次将“内部动态面板”转换为动态面板命名为“区域面板”，这一步为了控制菜单导航的显示范围，设置如下图：

3、给“向左/向右箭头”添加单击时交互，设置移动“内部动态面板”的坐标和边界，设置如下图：

End·往期推荐

大屏可视化：舞动数据与美观的“设计秘籍”

Axure科技感大屏系统设计：智慧农场管理平台

智慧水务：解锁供水行业的未来密码，引领数字化转型新篇章

Axure原型设计秘籍：解锁高效设计与开发的宝藏工具

Axure Web端交互元件库：从Quick UI到700+组件的飞跃

相关知识

平板显示行业记录 雪球集锦，版权归原作者。======= 中信建投：面板行业之“龟兔赛跑” 一、前言 2012 年全球LCD 面板产业景气...
kylinH5框架之项目组件理解
【野生字幕】After Effects教程
花店管理系统
基于过程的组件化小麦生长模拟系统
【司空侠PS教程】景观项目提升之小区创意花坛改造设计
花卉与健康教程
插花设计教程
在ant设计中选择日期后，无法清除范围选取器
滚动功方法

网址: Axure设计之左右滚动组件教程（动态面板） https://m.huajiangbk.com/newsview423144.html

上一篇: 掌握滤波器设计利器：Filter

下一篇: 第六课《花儿朵朵》教学反思