Axure设计之左右滚动组件教程(动态面板)

embedded/2024/11/8 22:06:17/

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

一、效果展示:

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

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

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

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

二、设计思路

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

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

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

知识补充:

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

三、关键步骤

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

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

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

 

End·往期推荐

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

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

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

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

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


http://www.ppmy.cn/embedded/136002.html

相关文章

Spring Boot 与 Vue 共筑卓越租车管理新平台

作者介绍:✌️大厂全栈码农|毕设实战开发,专注于大学生项目实战开发、讲解和毕业答疑辅导。 🍅获取源码联系方式请查看文末🍅 推荐订阅精彩专栏 👇🏻 避免错过下次更新 Springboot项目精选实战案例 更多项目…

循环神经网络RNN

概念 大家在学习深度学习时,都是按照“人工神经网络”、“卷积神经网络”的顺序来学习的。我们在学习的过程中可能会发现这样网络可能不适用一些带有“时间序列”的问题。 比如下面,要预测股票价格: 时间特征1特征2特征3特征4价格2024-11-…

3种最难学习和最容易学习的 3 种编程语言

无论您是想改变职业方向还是扩展程序员的技能,您选择学习的语言都会显着影响您的时间投入和前景。 一些语言使用熟悉的语法,欢迎为繁重的工作提供最少的代码命令,并且是开源的,具有有用的开发人员社区,可指导用户充分利…

js下载excel示例demo

<Buttontype{"primary"}key"out"onClick{async ()>{const ExportJsonExcel require("js-export-excel");const datas selectedRowsState //确保勾到的数据是一个列表&#xff0c;列表中每个值是字典const option {};const dataTable […

内网部署web项目,外网访问不了?只有局域网能访问!怎样解决?

相关技术 要实现“内网部署&#xff0c;外网访问”&#xff0c;可以使用内网穿透、VPN技术、DMZ主机、端口映射等方法。以下是对这些方法的详细解释&#xff1a; 一、内网穿透 内网穿透是一种技术&#xff0c;它通过将内网设备映射到公网上的方式&#xff0c;实现外网访问内…

面相小白的php反序列化漏洞原理剖析

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理反序列化漏洞的一些成因原理 建议学习反序列化之前 先对php基础语法与面向对象有个大体的了解 (我觉得我整理的比较细致&#xff0c;了解这俩是个啥就行) 漏洞实战情况 这个漏洞黑盒几乎不会被发现&am…

正则表达式 - 简介

正则表达式 - 简介 正则表达式&#xff08;Regular Expression&#xff0c;简称Regex&#xff09;是一种用于处理字符串的强大工具&#xff0c;它允许用户通过特定的模式&#xff08;pattern&#xff09;来搜索、匹配、查找和替换文本中的数据。正则表达式广泛应用于文本编辑器…

在PHP中使用UTF-8编码防止乱码需要注意以下几点‌:

在PHP中使用UTF-8编码防止乱码需要注意以下几点‌&#xff1a; ‌设置PHP文档编码为UTF-8‌&#xff1a;在PHP代码的最开始使用header()函数设置文档的编码为UTF-8。例如&#xff1a;header("Content-Type: text/html; charsetutf-8");‌12。 ‌确保文件编码为UTF-8…