• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程:如何使用Axure中继器元件?

Axure教程:如何使用Axure中继器元件?

作者: @许木胜 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure中继器教程,axure8.0中继器教程,axure中继器视频教程,axure7.0中继器教程,axure中继器等相关知识, @许木胜 希望在学习及工作中可以帮助到您

这是本人在“人人都是产品经理”发表的第一篇文章,主要目的是教会小白使用Axure7.0新增的组件——中继器(Repeater)。才疏学浅,如有纰漏,还请指正。

使用之前

在使用之前,我们总得搞清楚我们将要使用的元件是什么东西。

据Axure官网介绍,中继器是一种用于展示模式重复的文本或图标的元件。没看懂?不急,我们先看一下效果演示,然后再一步步把这个效果做出来,就可以开始使用中继器了~

一、初识中继器

从元件库中找到中继器,按住并拖入中间的操作区,我们可以看到它已经有一列三行,分别写着1、2、3。

那么操作区中的1、2、3从哪里来的呢?聪明的同学已经看出来了,在右侧的“检视:中继器——中继器”栏有一个编辑区,里边便有1、2、3。但是这还不够,如果我们把“检视:中继器——交互——每项加载时”中的“case1”删除,那么操作区中1、2、3便消失了。由此可见,还需要“case1”把操作区和编辑区联系在一起。

按“Ctrl+Z”撤销“删除case1”操作,双击“case1”打开用例编辑<每项加载时>面板,我们来看看“case1”究竟做了什么。

只见上面写着 ?设置文字于(矩形)= “[[Item.Column0]]” ?。顿生疑惑:什么?矩形?什么矩形?Item又是什么?Column0又是什么?Item.Column0又是什么?为什么要用“[[ ]]”包起来?

关掉用例编辑<每项加载时>面板,回到主界面,双击操作区的中继器,打开中继器模式编辑操作区。

点击中继器模式编辑操作区中的矩形,可以看到右侧“检视:矩形”中名称栏显示“(矩形名称)”,这就是上文中的“(矩形)”。

点击“检视:矩形”中的名称栏,我们给这个矩形取名为“动物”。

选中中继器模式编辑操作区中的矩形,按“Ctrl+C”和“Ctrl+V”复制粘贴出新的矩形,拖动矩形放置在原矩形的右侧,并在右侧“检视:矩形”中名称栏将矩形名称改为“食物”。

将操作区切换回index页面,我们可以看到发生了一些变化:中继器变成了两行三列,“case1”中的“矩形”也变成了“动物”。这是我们刚才在中继器模式编辑操作区修改的结果。

接下来,我们要做更多的操作。在右侧“检视:中继器——中继器”中,双击“Column0”,更名为“FirstColumn”,双击“添加列”,取名为“SecondColumn”。让我们看看“case1”发生了什么变化。

我们将“Column0”改名“FirstColumn”之后,“case1”中的“Column0”也变为“FirstColumn”,由此我们可以意会他们的关系。

二、每项加载时

接下来,我们在“检视:中继器——中继器”的编辑区中填入一些动物和食物的对应关系,可以看到,操作区也发生了改变,但是只显示了第一列,第二列却没有显示。

这是因为“case1”只同步了第一列却没有同步第二列。接下来我们试着同步第二列。双击“case1”打开用例编辑<每项加载时>面板,可以看到,“case1”只将“动物(矩形)”和“FirstColumn”联系起来。

有样学样,我们把“食物(矩形)”和“SecondColumn”也联系起来。先勾选“食物(矩形)”,再将右下角的值由默认的“[[Item.FirstColumn]]”改为“[[Item.SecondColumn]]”。聪明的同学应该可以意识到,这个“[[Item.xxxxxx]]”是一种默认格式,代表编辑区中xxxxxx列的值。很正确,Item就代表这个中继器的编辑区,“[[ ]]”则代表取值,取中继器编辑区xxxxxx列的值。

点击确定按钮,关闭用例编辑<每项加载时>面板,回到操作区,我们看到操作区中的中继器的第二列成功地与编辑区中的第二列同步。

看到这里,你已经明白了很多。但是依然有疑惑:如果只是静态地展示一个表格那么直接使用“表格”元件不久可以了?耍我呢?

稍安勿躁,学习了以上知识,下面我们可以准备起飞了。

三、动态添加

首先,我们添加两个文本框分别用于输入“动物”和“食物”,再添加个用于提交数据的提交按钮。

什么?提交数据?

将两个文本框和提交按钮分布在右侧检视的名称栏改名为“输入动物”、“输入食物”和“提交按钮”。

点击提交按钮,在右侧“检视:提交按钮——交互”中双击“鼠标单击时”,打开用例编辑<鼠标单击时>面板。在左侧添加动作栏双击“中继器——数据集”中的“添加行”。在右侧配置动作栏勾选“(中继器)”(因为我们还没给我们的中继器取名,所以显示为“(中继器)”,跟前面提到的“(矩形)”一个道理)。

右侧配置动作栏下面点击添加行打开添加行到中继器。

点击“FirstColumn”下方,“添加行”右侧的“fx”,打开编辑值面板。点击“局部变量”中的“添加局部变量”。

将“局部变量”中的“LVAR1”改为“Animal”,右侧“输入食物”改为输入动物。在上方“插入变量或函数”下方的输入框输入“[[Animal]]”(对应上面的“Animal”,意为“Animal”变量的值)。

点击确定按钮关闭当前面板。同样操作第二列:点击“SecondColumn”下方,“添加行”右侧的“fx”,打开编辑值面板进行编辑。

同样点击确定按钮关闭当前面板。现在添加行到中继器面板

您可能想查找下面的文章:

  • Axure教程:中继器如何切换标记状态?
  • Axure教程:如何使用Axure中继器元件?
  • Axure中继器实践:如何制作一个「记忆翻牌」小游戏?
  • Axure教程 | 详解中继器的九宫格
  • Axure教程:用中继器和日期函数实现万年历
  • Axure中继器姊妹篇:列表页添加排序和筛选功能
  • Axure 原型 | 关于中继器的简单使用及应用的场景
  • Axure中继器的基本使用:实现一个简易的人员添加、删除模块
  • Axure教程:中继器实现列表到详情页的数据传递

相关文章

  • 2017-06-13Axure实例:Axure Pro 8制作产品需求文档
  • 2017-06-14Axure教程:滑动鼠标页面自动切换(一)
  • 2017-06-14Axure原型设计,单读APP原型分享
  • 2017-06-14Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)
  • 2017-06-14Axure实战:滑动拼图解锁教程
  • 2017-06-13Axure中继器:制作可交互的“APP音乐播放列表页”
  • 2017-06-14Axure7.0教程(四)中继器的使用(4)
  • 2017-06-14Axure教程 - 为原型设计添加点动画效果
  • 2017-06-14axure实现网站的通用注册原型设计
  • 2017-06-13Axure教程:微信聊天列表原型制作(一)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何在Axure RP 8 中规范使用 Font Awesome 图标库完成设计
    • Axure教程:微信面对面建群原型设计
    • Axure教程:原型设计之多用户注册登录
    • Axure7.0教程(一)中继器的使用(1)
    • Axure教程:如何制作炫酷高效的元件库?
    • Axure教程|如何制作”返回顶部”原型功能?
    • Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
    • Axure教程:多账户的登录验证
    • Axure 7.0实例:利用Axure制作放大镜原型
    • Axure设计:制作iOS列表左滑菜单效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有