axure7.0教程_多值单变量的页面传值

2023-12-20 15:08

本文主要是介绍axure7.0教程_多值单变量的页面传值,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

今天这篇Axure教程,主要讲的是字符串函数的应用。在我们做一些Axure原型的时候,经常需要实现在两个或多个页面传递一些信息的效果,比如:将一件商品选择并点击购买按钮后,跳转到另一个页面中进行结算,这个时候就要把选中的商品信息在另外一个页面中显示。在Axure6.5中这种效果也可以实现,但是需要使用与信息数量相等的变量来实现,比如名称一个变量,价格一个变量,数量一个变量。Axure官方的建议在一个原型中变量不要超过25个,所以变量的资源是紧俏的,就好像我们痛恨有钱人搞二三四五六七八奶,其实你搞不搞我管不着,但是妹纸都让你一个人搞了,一个都不给我留我就不干了。变量也一样,一个模块占用了大量的变量,等其他模块有需求的时候发现没有了,就会想搞不上妹纸一样郁闷。所以,感谢天、感谢地、感谢Axure7,只要通过一个字符串函数,我们就能N个信息同时使用一个变量……好像有内涵…..,我是不是又邪恶了。

好了,闲话不多说,让我们来看看怎么来实现。

本教程使用的函数:substring和indexof

说明:substring用来截取字符串,indexof用来获取分隔符的位置。

本教程示例原型下载:axure7.0教程_小楼作品(十六)多值单变量的页面传值.rp

首先,还是准备元件:

1、  准备三个文本框,分别设置好标签xingming、xingbie、nianling;

2、  准备好一个按钮,用来触发事件;

3、  打开跳转页,放进去一个2行3列表格,第一行写上数据名称,第二行的三个单元格分别写好标签,准备接受数据。

4、  将表格转换为动态面板,因为要用到动态面板的加载事件,避免使用页面加载事件。

元件准备完毕,就直接开始制作了,这个是技术活,不需要思路。

1、  我们新增一个变量叫xinxi,然后在按钮的onclick事件中设置这个变量的值,我们需要把三个文本框的值都赋给这个变量,这时候就需要在fx里面设置3个局部变量(局部变量只在单个事件范围内有效,对全局无影响),来获取这3个文本框的值,并把三个局部变量掉取出来,和分隔符一起组成一个字符串。如图所示,我们在三个局部变量中间插入了2个分隔符|1|和|2|,分隔符是自定义的,只要不与局部变量值相同就可以。



2、  设置完变量的值后,再添加一个跳转到列表页的事件。

3、  在动态面板的加载事件中添加事件,来分解字符串,并将分解出来的字符串添加到不同的单元格。

分解过程:

我们知道变量里的字符串结构是:xingming值|1|xingbie值|2|nianling值

第一个单元格的文字,我们需要取到xingming值,在这里我们使用substring进行截取,

Substring(from,to)的两个参数分别是截取的起始位置和截取的最终位置+1,我们知道字符串的起始位置是0,但是最终位置就难以确定,因为每次输入的值得长度都可能不一样,所以这里我们需要用到indexof通过确定分隔符的位置,来确定截取的位置。

Indexof的使用方法,变量.indexof(’字符串参数’),一定要有两个单引号,否则会出错。


如图所示:

Ximing值截取的位置:0,xinxi.indexof(‘|1|’)

Xingbie值截取的位置:xinxi.indexof(‘|1|’)+3,xinxi.indexof(‘|2|’)

说明:起始位置+3是因为要从|1|之后的位置开始截取,而xinxi.indexof(‘|1|’)的位置是|1|中前面那个竖线的位置,所以要在取到的位置上+3。

Nianling值得截取位置:xinxi.indexof(‘|2|’)+3

说明:使用substring截取字符串,如果只输入一个参数,意思就是从输入的参数的位置一直截取到末尾。

最后我们就把上面的这三组参数都分别放在xinxi.substing(,)中,并添加到相应的单元格:

单元格xingming文字= [[xinxi.substring(0, xinxi.indexof(‘|1|’))]]

单元格xingbie文字= [[xinxi.substring(xinxi.indexof(‘|1|’)+3, xinxi.indexof(‘|2|’))]]

单元格nianling文字= [[xinxi.substring(xinxi.indexof(‘|2|’)+3))]]


这篇关于axure7.0教程_多值单变量的页面传值的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Ubuntu固定虚拟机ip地址的方法教程

《Ubuntu固定虚拟机ip地址的方法教程》本文详细介绍了如何在Ubuntu虚拟机中固定IP地址,包括检查和编辑`/etc/apt/sources.list`文件、更新网络配置文件以及使用Networ... 1、由于虚拟机网络是桥接,所以ip地址会不停地变化,接下来我们就讲述ip如何固定 2、如果apt安

PyCharm 接入 DeepSeek最新完整教程

《PyCharm接入DeepSeek最新完整教程》文章介绍了DeepSeek-V3模型的性能提升以及如何在PyCharm中接入和使用DeepSeek进行代码开发,本文通过图文并茂的形式给大家介绍的... 目录DeepSeek-V3效果演示创建API Key在PyCharm中下载Continue插件配置Con

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll

Java多线程父线程向子线程传值问题及解决

《Java多线程父线程向子线程传值问题及解决》文章总结了5种解决父子之间数据传递困扰的解决方案,包括ThreadLocal+TaskDecorator、UserUtils、CustomTaskDeco... 目录1 背景2 ThreadLocal+TaskDecorator3 RequestContextH

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

Spring Boot整合log4j2日志配置的详细教程

《SpringBoot整合log4j2日志配置的详细教程》:本文主要介绍SpringBoot项目中整合Log4j2日志框架的步骤和配置,包括常用日志框架的比较、配置参数介绍、Log4j2配置详解... 目录前言一、常用日志框架二、配置参数介绍1. 日志级别2. 输出形式3. 日志格式3.1 PatternL

MySQL8.2.0安装教程分享

《MySQL8.2.0安装教程分享》这篇文章详细介绍了如何在Windows系统上安装MySQL数据库软件,包括下载、安装、配置和设置环境变量的步骤... 目录mysql的安装图文1.python访问网址2javascript.点击3.进入Downloads向下滑动4.选择Community Server5.

SpringMVC前后端传值的几种实现方式

《SpringMVC前后端传值的几种实现方式》本文主要介绍了SpringMVC前后端传值的方式实现,包括使用HttpServletRequest、HttpSession、Model和ModelAndV... 目录一、从Controller层到JSP界面1、使用HttpServletRequest的方式2、使

CentOS系统Maven安装教程分享

《CentOS系统Maven安装教程分享》本文介绍了如何在CentOS系统中安装Maven,并提供了一个简单的实际应用案例,安装Maven需要先安装Java和设置环境变量,Maven可以自动管理项目的... 目录准备工作下载并安装Maven常见问题及解决方法实际应用案例总结Maven是一个流行的项目管理工具

本地私有化部署DeepSeek模型的详细教程

《本地私有化部署DeepSeek模型的详细教程》DeepSeek模型是一种强大的语言模型,本地私有化部署可以让用户在自己的环境中安全、高效地使用该模型,避免数据传输到外部带来的安全风险,同时也能根据自... 目录一、引言二、环境准备(一)硬件要求(二)软件要求(三)创建虚拟环境三、安装依赖库四、获取 Dee