Axure教程：中继器如何加载显示图片

编辑导语：在原型设计中，很多场景会应用到“中继器”这个元件。那么中继器如何加载显示图片的操作？很多新手都会无从下手。本文作者详细讲解了中继器加载显示图片的方法，供你学习。

一、元件准备

一个中继器
一个表格
一个图片元件（加载图片的重点）

二、元件设置

下面分步骤讲解各个元件的设置。

1. 设置表格列头

把表格设置成5列（无边框），每列的文字编辑分别为：学号、姓名、性别、头像、民族。如下图所示：

2. 设置中继器

拖拽一个中继器起名为：列表内容。把原有的一列新增到5列，并分别起名：xuehao、xingming、xingbie、touxiang、minzu。并设置宽、高都为：100。如下图所示：

3. 图片设置（重点）

拖拽一个图片起名：touxiang。放入“头像”列中，设置宽、高都为85。如下图所示：

4. 中继器填充内容

对除了“头像”外的其他列填写内容。如下图所示：

对“头像”列进行设置。首先选中一个单元格右键，选择“导入图片”，并选择准备好的本地图片。设置好的效果如下图所示：

三、交互设置

1. 文本交互

把学号、姓名、性别、民族这4列，加载时设置文本，每列值选择对应的函数。设置后的效果如下图所示：

2. 图片交互

把头像这列，加载时设置图片，并选中图片“touxiang”，设置DEFAULT图片：选中“值”，选择函数：[[Item.touxiang]]。设置后的效果如下图所示：

四、展示效果

按上面的步骤设置完成之后，最终的展示效果会如下图所示：

Axure教程：中继器如何加载显示图片相关推荐

thinkphp+ajax无刷新分页并加载显示图片
2019独角兽企业重金招聘Python工程师标准>>> 最近自己用thinkphp和bootstrap做一个小站点,在用到ajax与后台数据库交互实现无刷新分页时,因为我需要返回的数 ...
预加载显示图片的艺术
一般情况下网页中的图片都是随文档流依次加载的,什么时候用到则什么时候加载,但是有些时候这样的加载方式往往会影响用户体验,比如鼠标hover变换背景图片的时候,只有鼠标移入才会对变换的图片进行加载,这样 ...
mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
Android 使用imageLoader来加载显示图片
简介 Android上最让人头疼的莫过于从网络获取图片.显示.回收,任何一个环节有问题都可能直接OOM,这个项目或许能帮到你.Universal Image Loader for Android的目的 ...
Python机器视觉--OpenCV入门--OpencCV的安装与图片加载显示
1. 安装OpenCV 执行pip install opencv-python==3.4.1.15, 3.4.2之后有些算法申请了专利,用不了了.(使用其他版本也可以) 安装opencv扩展包(选装) ...
55ide游戏引擎教程3：图片加载显示
55ide引擎图片创建显示有两种方式.当然,我们主要讲通过代码来进行展示.好了,过年了,废话不多说,留着喝酒时候再说. 1.到资源库加载一张图片引擎界面左侧,项目,上面有图片资源. 此时,我们双击可 ...
gif android 点击加载,android 加载显示gif图片的解决方案
使用方法: 1-把GifView.jar加入你的项目. 2-在xml中配置GifView的基本属性,GifView继承自View类,和Button.ImageView一样是一个UI控件.如: andr ...
android 加载显示富文本——TextView显示富文本和WebView显示富文本，WebView显示图片适配屏幕宽度
TextView加载显示添加依赖 implementation 'com.zzhoujay.richtext:richtext:3.0.8' implementation 'com.zzhoujay ...
glide工具类。加载显示原图片，显示圆角图片，gif图标显示
依赖 //支持gif 的控件 implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.1' 工具方法 private void up ...