【Axure RP9】中继器应用及相关案例

2023-12-20 08:20

本文主要是介绍【Axure RP9】中继器应用及相关案例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一 中继器简介

1.1 中继器是什么

   中继器(Repeater)是一种高级的组件(Widget),用于显示文本、图像和其他元素的重复集合。它是一个容器,容器中的每一个项目称作“item”,由于“item”中的数据由数据集来驱动,因此每一个“item”可以在展示的时候与其他不同

中继器由数据集(可以理解为轻量级的数据库)来驱动,因此它可以用来显示动态排序和过滤。当你需要演示动态可排序/可过滤的设计(例如动态表格或产品列表)时,它将是你最优的选择

中继器部件可在Axure左侧的元件部分,直接拖至画布(中间的区域)中。存储在数据集中的文本、图像、数字等等通过中继器的OnitemLoad交互事件来显示在每个要展示的项目上。项目item 每一个重复部分所有元件(文本、矩形、图片等等)的集合称为项目item。在编辑项目item时,您将只看到其包含的窗口小部件的一个实例(instance)

1.2 应用场景

  中继器(Repeater)在数据列表、表格等数据展示场景中经常使用。它可以方便地重复展示类似的UI元素,并自动生成各个元素的id、类名等属性,方便在交互设计、数据交互等方面的应用

例:以微信首页的消息列表为例,可以添加一个中继器元件,然后设置相关的字段数据,比如标题、内容、新消息标志、消息免打扰标志等。这样,中继器就可以根据这些数据动态地生成消息列表。同时,还可以通过设置交互事件,实现消息的动态显示和隐藏,比如当有新消息时显示小红点,当消息被设置为免打扰时不显示小红点等

1.3 如何使用中继器

通过以下步骤在Axure中创建和使用继器

创建一个继器:在Axure的“部件”库中,找到并拖动一个继器部件到您的页面上。您还可以使用快捷键Ctrl+Shift+R来创建一个新的继器。

定义继器的数据:双击继器部件,进入继器编辑模式。在这里,您可以定义继器的列数和行数,并填充每个单元格中的数据。您可以手动输入数据,也可以从外部数据源导入数据。

设计继器的样式:在继器编辑模式下,您可以自定义继器的样式,包括字体、颜色、边框等。您还可以为每个单元格应用不同的样式。

使用继器:完成继器的设计后,您可以在页面中使用它。拖动继器部件的实例到您需要展示重复内容的位置,并根据需要调整大小和样式。继器的实例将自动根据您在继器编辑模式中定义的数据进行填充。

动态交互:继器还支持动态交互。您可以通过添加交互事件和条件,为继器中的元素创建交互效果,并实现与其他部件的联动

二 中继器应用

在Axure的“元件”中,找到并拖动一个继器部件到您的页面上

定义继器的数据:双击继器部件,进入继器编辑模式。在这里,您可以定义继器的列数和行数,并填充每个单元格中的数据。您可以手动输入数据,也可以从外部数据源导入数据。

打开右侧 交互部分

点开目标元件,这里的目标指的是中继器的单元格名称,值指的是数据源中单元格的列名。也就是你想你的中继器页面中显示数据源中的哪一列,就改成那一列的名称。总之是一一对应的。

注意:值要加中括号,不然的话就不是一个变量而是一个固定的值。如果不想自己手打,可以点fx图标进去选择你想要的数据来源。

预览效果:

 三 中继器增删改查案例(CRUD)

3.1 三列(3字段)增删改查

这篇关于【Axure RP9】中继器应用及相关案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/515368

相关文章

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

5分钟获取deepseek api并搭建简易问答应用

《5分钟获取deepseekapi并搭建简易问答应用》本文主要介绍了5分钟获取deepseekapi并搭建简易问答应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需... 目录1、获取api2、获取base_url和chat_model3、配置模型参数方法一:终端中临时将加

Redis的Zset类型及相关命令详细讲解

《Redis的Zset类型及相关命令详细讲解》:本文主要介绍Redis的Zset类型及相关命令的相关资料,有序集合Zset是一种Redis数据结构,它类似于集合Set,但每个元素都有一个关联的分数... 目录Zset简介ZADDZCARDZCOUNTZRANGEZREVRANGEZRANGEBYSCOREZ

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

Python调用另一个py文件并传递参数常见的方法及其应用场景

《Python调用另一个py文件并传递参数常见的方法及其应用场景》:本文主要介绍在Python中调用另一个py文件并传递参数的几种常见方法,包括使用import语句、exec函数、subproce... 目录前言1. 使用import语句1.1 基本用法1.2 导入特定函数1.3 处理文件路径2. 使用ex

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck

关于Maven生命周期相关命令演示

《关于Maven生命周期相关命令演示》Maven的生命周期分为Clean、Default和Site三个主要阶段,每个阶段包含多个关键步骤,如清理、编译、测试、打包等,通过执行相应的Maven命令,可以... 目录1. Maven 生命周期概述1.1 Clean Lifecycle1.2 Default Li

numpy求解线性代数相关问题

《numpy求解线性代数相关问题》本文主要介绍了numpy求解线性代数相关问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 在numpy中有numpy.array类型和numpy.mat类型,前者是数组类型,后者是矩阵类型。数组