axure如何实现跳转_Axure中继器实现APP中设置页面的各种列表
中继器是Axure中的一个高级元件,可以当做Axure中的小型数据库使用,用于实现一些增删查改的效果,同时可用于一些具有相同元件组合的组件的快速生成,比如APP中的设置,如下图所示。下面我们介绍一下怎么用中继器实现。
中继器基础知识
我们先介绍一下中继器的基础知识,拖入一个中继器,可以看到显示的是纵排的三个矩形框,框中内容分为为1,2,3,交互中有一个事件每项加载时,元件动作是设置矩形框的文本为Item.Column0,点击样式,可以看到有一个数据表格,默认只有一列Column0,列中数据为1,2,3。双击中继器,可以看到其中只有一个矩形框。
从中不难看出以下几点:
1)双击进入中继器后,添加的各种元件相当于中继器本身的模板,后面会按这个模板进行渲染;
2)模板渲染多少次是由样式中数据表的行数决定的,比如默认只有三行数据,就只生成了三个矩形框;
3)样式表中的每一行数据就是每次渲染时可以传入模板中的数据,数据传入需要通过中继器的“每项加载时”这个事件进行触发设置,比如比如默认的是把Column0这列的数据传给了矩形框。通过增加列,可以增加每次渲染时可以使用的数据,列名可以自定义(英文字符)。
最后,数据表中的数据除了字符串外,通过右键还可以引入图片或则页面,这个功能非常强大,下面我们将要用到。
有了上面的基础,我们就可以开始制作了。首先我们要确定一下我们的模板组成,对于不带图表的,应该要包含一下元件:
1)一个矩形框,用于规定模板的边界大小,同时用于装载选项的名字,边框不显示,元件命名为”选项名“,注意设置文字的左边距;
2)一个swich切换开关;
3)一个标签,用于存放右侧的提示文字,命名为”提示文字“,注意选择右对齐;
4)一个“>"符号;
5)一根直线,放于底边,作为每行的分隔线,命名为”分隔线“。
如下图所示,把这几个元素组合好。
在数据表中输入下面的内容,一共四行数据,表示我们要生成四个选项。
name表示选项名;
switch为标志位,如果需要使用开关按钮就填入true,否则不填,为true时后面都不用填;
option是选项右侧的文字,如果不需要则不填;
dayufu为标志位,需要显示大于符号时填true,与switch不能同时设置;
pageUrl用于引用页面,对于设置了大于符号的项,一般都要跳转页面,直接引用该页面即可。
数据和模板都设置好了,下面要控制每一项渲染时的数据传入,首先先设置文字类的数据,主要有两个:
1)把模板中的选项名设置为Item.name;
2)把提示文字设置为Item.option。
通过fx中插入变量,Item表示中继器本身。
这样设置以后,显示如下:
接下来就是控制显示switch开关还是显示”>“符号,这个可以为模板添加载入事件,在载入时判断改行的数据switch是否为true,不为true时将其隐藏,否则将”提示文字“和”>"符号隐藏:
最后为模板添加一个单击事件,当pageUrl不为空时,执行打开链接的操作。
最后,最后一项一般是没有分隔线的,这个可以用到中继器中的一个变量isLast,就是当前项是不是中继器中的最后一项,是的话,这个值是true。因此我们可以单独为下划线加入一个载入时的事件(放在模板组合上也可以),这样最后一项的分隔线就不显示了。
带图标的
下面在以上的基础上再实现一个带图标的,有了以上基础,其实就比较简单了,就是在模板里面添加一个图片元件。
在数据表中增加一列pic,右键从本地引入图标(推荐从阿里巴巴矢量图标库下载png图片)
然后在“每项加载时”增加一个设置图片的元件动作即可。由于有些png图片的空白边距过大,可能导致显示的图标大小不一,所以可以先把图标自己编辑一下。
最后,中继器自身还有一些变量如
index: 当前行的序号;
isFirst: 是不是第一行;
isEven: 是否是偶数行;
isOdd: 是否是奇数行;
isMarked: 是否是标记行
等等,可以用于很多判断和筛选。
axure如何实现跳转_Axure中继器实现APP中设置页面的各种列表相关推荐
- 【iOS】跳转App权限设置页面
跳转App设置页的方法 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:UIApplicationOpenSetting ...
- axure如何实现跳转_Axure教程:网易云音乐首页原型设计
作者利用Axure动态面板功能对网易云音乐首页进行了一个简单的原型设计,那如何利用Axure动态面板功能实现轮播效果及交互功能以及隐藏丑陋的滚动条呢?下面来和我一起研究一下~ 制作示例如下: 网易云音 ...
- 【转】从一个App跳转到另一APP
应用场景: 百度地图等 第三方支付 第三方分享登陆 下面先说几个概念性东西: 1 URL :统一资源定位符(可以没有路径 但是必须要有协议头) 2 scheme: 协议头,用来决定查找资源的方式 3 ...
- ios跳转wifi设置页面
1.首先,需要添加一个URL Schemes 2.跳转自己APP的设置页面: [[UIApplication sharedApplication] openURL:[NSURL URLWithStri ...
- android appium 页面如何跳转,【appium实战】appium混合页面点击方法tap的使用
原标题:[appium实战]appium混合页面点击方法tap的使用 新书 速递 文 | 夜鸣猪 原生应用开发,是在Android.IOS等移动平台上利用官方提供的开发语言.开发类库.开发工具进行Ap ...
- iOS 从一个APP跳转到另一个APP,并带参数跳到指定页面
功能实现:A跳到B并打开B中指定页面 步骤: 1.首先创建两个项目(项目A,项目B),在项目B中的info.plist文件中添加URL Types,如下图所示:其中URL idenifier是项目B的 ...
- axure 调整中继器列宽_Axure中继器:柱状图灵活变幻的诀窍
柱状图的使用在分析平台很常见,作为产品在设计此类分析统计平台的时候,常常面临找不到合适的图表元件的情况,又或是找到了合适的图表元件,元件本身又比较偏静态,需要花一些时间去做适当的修改.本文主要介绍了如 ...
- axure 元件_Axure动态面板(上下左右滑动页面)
(2月24日更新)B站视频版教程:https://www.bilibili.com/video/av80136342/ 手机端交互中,页面的上下左右滑动是常用的交互形态,今天给大家分享一下如何使用Ax ...
- axure如何实现跳转_IT世界网
近日有关于Axure如何设计制作页面跳转的问题受到了很多网友们的关注,大多数网友都想要知道Axure如何设计制作页面跳转的具体情况,那么关于到Axure如何设计制作页面跳转的相关信息,小编也是在网上进 ...
最新文章
- 理解Hinted Handoff
- 一文看懂BCH减半时间计算及减半影响
- Linux 下 4 种实时监控日志文件的方法,总有一种适合你
- zynq 文件系统中加载PL fpga.bit笔记
- all resources based on handshake
- ElementUI分页组件的封装
- WINCE BSP中source文件中的宏定义
- Eclipse 中修改java编译版本
- 苹果或在2021年新iPhone上增加屏下Touch ID
- 真香!谷歌终与美国国防部合作,签署百万美金云服务合同
- EMOS部署及管理和部署EMOS邮件服务器
- 通过使用中国移动随e行客户端软件在电脑上发短信
- 网络安全建设网络可用性管理方法
- c语言k1什么意思啊,一张图告诉你斐讯路由器K1S、K2,K2C的区别-路由器交流
- FFmpeg屏幕录制
- win10不能上传文件到服务器,Win10系统下蓝牙无法传输文件怎么解决
- 快速梳理23种常用的设计模式
- Liferay 学习教程-ServiceBuilder的基本使用
- H3CSE园区-组播转发机制
- Discuz论坛 创始人/超级管理员密码忘记解决办法!