。

通过案例我们可以举一反三进行其他方式的滚动组件设计#xff0c;如常见的上下滚动、翻页滚动等等。

一、效果展示#xff1a;

1、点击“向左箭…很多项目产品设计经常会遇到左右滚动的导航、图片展示、内容区域等接下来我们用Axure来实现一下左右滚动的菜单导航。

通过案例我们可以举一反三进行其他方式的滚动组件设计如常见的上下滚动、翻页滚动等等。

一、效果展示

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

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

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

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

知识补充

到达指定移动到某个位子这就需要在后面输入移动到的坐标。

经过指定移动的距离最后移动结果是当前元件的坐标位置左上端点的坐标加上后面设置的坐标值。

无论偏移、尺寸都是以坐标值来展示坐标值可正、可负。

X轴为负则向左移动Y轴为负数则向上移动。

设置边界是设置可移动范围边界设置后元件不能移动到边界之外。

三、关键步骤

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

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

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

End·往期推荐