Axure制作可视化大屏动态滚动列表教程

news2025/5/19 1:59:14

在可视化大屏设计中,动态滚动列表是一种常见且实用的展示方式,能够有效地展示大量信息。本文将详细介绍如何使用Axure制作一个动态滚动的列表展示模块。

一、准备工作

  1. 打开Axure软件:确保你已经安装并打开了Axure RP软件。
  2. 创建新项目:选择合适的设备尺寸(如大屏常见的1920x1080),创建一个新的项目。

二、制作列表表格

我们将使用Axure的中继器来制作列表表格。

  1. 拖入中继器:从左侧的元件库中拖入一个中继器到画布上。
  2. 设置中继器列:双击中继器,进入中继器的编辑界面。在“列”选项卡中,添加以下列:
    • 订单编号
    • 地区
    • 检修时间
    • 销毁类型
    • 运输车辆
    • 风险预警
  3. 添加数据:在“数据集”选项卡中,添加示例数据,如图中所示:
    • 202110300001, 广东省深圳市, 2021-12-15 16:20:30, 物品丢失, 1号车辆, 高风险
    • 202110300002, 广东省广州市, 2021-12-15 16:20:30, 包装破损, 2号车辆, 中风险
    • 202110300003, 广东省惠州市, 2021-12-15 16:20:30, 商品毁坏, 3号车辆, 低风险
    • 202110300004, 广东省珠海市, 2021-12-15 16:20:30, 物品丢失, 4号车辆, 中风险
  4. 设计列表项样式:回到中继器的主界面,设计每一项的样式。可以使用矩形、文本框等元件来展示每一列的数据。

三、创建动态面板

为了实现列表的动态滚动效果,我们需要使用动态面板。

  1. 拖入动态面板:从元件库中拖入一个动态面板到画布上,将其命名为“外部面板”,用于限定列表的可视区域。
  2. 调整外部面板大小:根据需要调整外部面板的大小,使其能够容纳列表的一部分内容。
  3. 拖入另一个动态面板:在外部面板内再拖入一个动态面板,命名为“内部面板”,用于放置中继器。
  4. 将中继器放入内部面板:将之前设计好的中继器拖入内部面板中。

四、设置动态面板交互逻辑

  1. 设置内部面板的交互
    • 选中内部面板,在右侧的“交互”面板中,点击“添加交互”。
    • 选择“移动”动作,设置移动方向为“垂直”,距离为30像素,动画为“无”。
    • 再添加一个“等待”动作,设置等待时间为2000毫秒(2秒)。
    • 最后添加一个“触发事件”动作,触发内部面板的“载入时”事件,实现循环滚动。
  2. 设置外部面板的交互(可选):如果需要,可以在外部面板上添加一些交互,比如鼠标悬停时暂停滚动等。

五、预览和调试

  1. 预览项目:点击Axure工具栏中的“预览”按钮,查看动态滚动列表的效果。
  2. 调试:如果发现滚动效果不理想,可以回到Axure中调整移动距离、等待时间等参数,直到达到满意的效果。

六、总结

通过以上步骤,我们成功使用Axure制作了一个可视化大屏的动态滚动列表展示模块。这个模块可以有效地展示大量信息,并且通过动态面板的交互逻辑实现了列表的自动滚动效果。在实际项目中,你可以根据具体需求调整列表的样式、数据和滚动参数,以达到最佳的展示效果。

希望这篇教程对你有所帮助,祝你使用Axure进行原型设计顺利!

 — — 往期推荐 — —

Axure设计的“广东省网络信息化大数据平台”数据可视化大屏-CSDN博客

EQL UI元件库:Axure设计师的高效利器-CSDN博客

Axure大屏可视化模板:赋能多领域,开启数据展示新篇章_axre-CSDN博客

2小时完成1天工作量?有了这款Axure移动端元件库,设计如此简单-CSDN博客

CRM企业客户关系管理系统产品原型方案-CSDN博客

Axhub Charts:Axure原型设计的动态数据可视化元件库-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2378933.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MATLAB实现振幅调制(AM调制信号)

AM调制是通信专业非常重要的一个知识点。今天我们使用MATLAB编程实现AM调制。 我们实现输入一个载波信号的频率与调制信号的频率后,再输入调幅度,得到已调信号的波形与包络信号的波形,再使用FFT算法分析出已调信号的频谱图。 源代码&#x…

6.1.1图的基本概念

基本概念 图: 顶点集边集 顶点集:所有顶点的集合,不能为空(因为图是顶点集和边集组成,其中一个顶点集不能为空,则图肯定不为空) 边集:所有边的集合,边是由顶点集中的2…

Linux面试题集合(6)

创建多级目录或者同级目录 mkdir -p 文件名/文件名/文件名 mkdir -p 文件名 文件名 文件名 Linux创建一个文件 touch 文件名 DOS命令创建文件 echo 内容>文件名(创建一个有内容的文件) echo >文件名(创建一个没有内容的文件&#xff09…

时间筛掉了不够坚定的东西

2025年5月17日,16~25℃,还好 待办: 《高等数学1》重修考试 《高等数学2》备课 《物理[2]》备课 《高等数学2》取消考试资格学生名单 《物理[2]》取消考试资格名单 职称申报材料 2024年税务申报 5月24日、25日监考报名 遇见:敲了一…

YOLOv7训练时4个类别只出2个类别

正常是4个类别: 但是YOLOv7训练完后预测总是只有两个类别: 而且都是LFM和SFM 我一开始检查了下特征图大小,如果输入是640*640的话,三个尺度特征图是80*80,40*40,20*20;如果输入是416*416的话,三个尺度特征…

【论文阅读】针对BEV感知的攻击

Understanding the Robustness of 3D Object Detection with Bird’s-Eye-View Representations in Autonomous Driving 这篇文章是发表在CVPR上的一篇文章,针对基于BEV的目标检测算法进行了两类可靠性分析,即恶劣自然条件以及敌对攻击。同时也提出了一…

flutter 配置 安卓、Ios启动图

android 配置启动图 launch_background.xml <?xml version"1.0" encoding"utf-8"?> <!-- Modify this file to customize your launch splash screen --> <layer-list xmlns:android"http://schemas.android.com/apk/res/android&…

基于朴素贝叶斯与 LSTM 的假新闻检测模型对比分析

一、引言 在信息爆炸的时代&#xff0c;假新闻的传播对社会产生了诸多负面影响。如何快速、准确地识别假新闻成为了重要的研究课题。本文将对比传统机器学习算法&#xff08;朴素贝叶斯&#xff09;与深度学习模型&#xff08;LSTM&#xff09;在假新闻检测任务中的性能表现&am…

【LeetCode 热题 100】搜索插入位置 / 搜索旋转排序数组 / 寻找旋转排序数组中的最小值

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;LeetCode 热题 100 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 搜索插入位置搜索二维矩阵在排序数组中查找元素的第一个和最后一个位置搜索旋转排序数组寻找旋转排序数组中的最小值…

副业小程序YUERGS,从开发到变现

文章目录 我为什么写这个小程序网站转小程序有什么坑有什么推广渠道个人开发者如何变现简单介绍YUERGS小程序给独立开发者一点小建议 我为什么写这个小程序 关注我的粉丝应该知道&#xff0c;我在硕士阶段就已经掌握了小程序开发技能&#xff0c;并写了一个名为“约球online”…

基于LLM合成高质量情感数据,提升情感分类能力!!

摘要&#xff1a;大多数用于情感分析的数据集缺乏意见表达的上下文&#xff0c;而上下文对于理解情绪往往至关重要&#xff0c;并且这些数据集主要局限于几种情绪类别。像 GPT-4 这样的基础大型语言模型&#xff08;Foundation Large Language Models&#xff0c;LLMs&#xff…

网络检测工具InternetTest v8.9.1.2504 单文件版,支持一键查询IP/DNS、WIFI密码信息

—————【下 载 地 址】——————— 【​本章下载一】&#xff1a;https://drive.uc.cn/s/295e068b79314 【​本章下载二】&#xff1a;https://pan.xunlei.com/s/VOQDXguH0DYPxrql5y2zlkhTA1?pwdg2nx# 【百款黑科技】&#xff1a;https://ucnygalh6wle.feishu.cn/wiki/…

【网络编程】十、详解 UDP 协议

文章目录 Ⅰ. 传输层概述1、进程之间的通信2、再谈端口号端口号的引出五元组标识一个通信端口号范围划分常见的知名端口号查看知名端口号协议号 VS 端口号 3、两个问题一个端口号是否可以被多个进程绑定&#xff1f;一个进程是否可以绑定多个端口号&#xff1f; 4、部分常见指令…

[目标检测] YOLO系列算法讲解

前言 目标检测就是做到给模型输入一张图片或者视频&#xff0c;模型可以迅速判断出视频和图片里面感兴趣的目标所有的位置和它 的类别&#xff0c;而当前最热门的目标检测的模型也就是YOLO系列了。 YOLO系列的模型的提出&#xff0c;是为了解决当时目标检测的模型帧率太低而提…

.NET NativeAOT 指南

目录 1. 引言 2. 什么是 .NET NativeAOT&#xff1f; 2.1 NativeAOT 的定义 2.2 NativeAOT 与传统 JIT 的对比 2.3 NativeAOT 的适用场景 3. NativeAOT 的核心优势 3.1 性能提升 3.2 简化部署 3.3 更小的应用体积 3.4 知识产权保护 4. NativeAOT 的基本用法 4.1 环境…

uniapp-商城-57-后台 新增商品(弹窗属性数据添加父级)

后台增加商品&#xff0c;需要添加相关的数据信息&#xff0c;这里还要添加属性&#xff0c;前面已经对相关的界面布局继续了编写。这里还要对页面添加的数据&#xff0c;置入到云数据库&#xff0c;继续永久保存&#xff0c;便于后期的使用。这里主要是讲属性数据 父级信息的添…

摩方 12 代 N200 迷你主机(Ubuntu 系统)WiFi 抓包环境配置教程

摩方12代N200迷你主机标配 Intel AX201无线网卡&#xff0c;支持 WiFi 6 协议&#xff08;802.11ax&#xff09;及蓝牙5.2。此网卡兼容主流抓包工具&#xff0c;但需注意&#xff1a; 驱动兼容性&#xff1a;Ubuntu 20.04及以上内核版本&#xff08;5.4&#xff09;默认支持AX2…

Unity(URP渲染管线)的后处理、动画制作、虚拟相机(Virtual Camera)

一、URP渲染管线 渲染管线是一系列渲染操作的集合&#xff0c;Unity提供了内置渲染管线&#xff08;Built-In&#xff09;和可编程渲染管线&#xff08;SRP&#xff09;两类渲染管线。内置渲染管线是Unity的默认渲染管线&#xff0c;其自定义选项有限。而可编程渲染管线可以通…

mac-M系列芯片安装软件报错:***已损坏,无法打开。推出磁盘问题

因为你安装的软件在Intel 或arm芯片的mac上没有签名导致。 首先打开任何来源操作 在系统设置中配置&#xff0c;如下图&#xff1a; 2. 然后打开终端&#xff0c;输入&#xff1a; sudo spctl --master-disable然后输入电脑锁屏密码 打开了任何来源&#xff0c;还遇到已损坏…

Echart地图数据源获取

DataV.GeoAtlas地理小工具系列 选择需要的区域地图,选中后输出即可: 地图钻取代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>map</title><style>html, body, #map{margin: 0;…