axure变量值传递

现在我们进行分析

用户要 *** 作什么：

l 输入用户名和密码,点击登录

l 跳转到首页

给用户什么反馈：

l 用户点击完登录之后,跳转到首页中

l 登录的用户名信息显示在跳转的页面中

实现分析：该案例主要是要实现用户登录信息在页面之间的传递,借助全局变量和局部变量能够实现

具体流程：

我们以在首页中显示用户名和密码为案例,进行讨论

1、做元件准备

建立两个页面,命名为登录页面和首页；

在登录页面中拖入一个矩形,添加两个文本标签分别命名为“用户名”、“密码”；再添加两个文本框,把文本框分别命名为“username”、“passWord”,注意把passWord文本框的文本类型设定为“密码”；接下来添加一个提交按钮,命名为登录

(图一：登录页面元件准备）

（图二：更改密码文本框文本类型）

在首页中,拖入一个矩形

2、添加全局变量,分别是username 和 passWord； *** 作方法：项目——全局变量——添加全局变量——确定

（图三添加全局变量）

（图四添加两个全局变量）

3、为全局变量赋值,在这里我们会用到局部变量,因为用户唯一进行点击的是“登录”按钮,所以我们需要给登录按钮“鼠标单击时”添加交互

Ø 首先分别为每个全局变量添加一个局部变量,把局部变量的元件文字值为登录页面输入的值,即借助局部变量,现把登录输入的数据传递到局部变量,再由局部变量传给全局变量

Ø 点击添加动作下面的“设置变量值”—选择“username”——点击“fx”——插入局部变量——设置元件文字为“username”——确定,同理去设定全局变量passWord.

（图五设置全局变量username）

（图六设置局部变量）

Ø 两个变量完成之后,点击“打开链接”——选择链接到首页

（图七登录界面交互）

4、为首页页面添加交互,选择“页面载入时”——“设置文本”——“矩形”——“fx”——在全局变量中输入“用户名：,密码：”并插入对应的变量,如下图图九

（图八首页设置文本）

（图九为文本添加变量）

（图十：首页交互设计）

就能实现变量值在页面中的传递

思考和总结：

​

实现变量在页面中的传递，这是一个经常我们会用到的功能，常用的场景是，用户通过用户名和密码进行登录，页面跳转到首页，首页中出现用户名等信息，基本实现效果如下

现在我们进行分析

用户要 *** 作什么 ：

输入用户名和密码，点击登录

跳转到首页

给用户什么反馈 ：

用户点击完登录之后，跳转到首页中

登录的用户名信息显示在跳转的页面中

实现分析 ：该案例主要是要实现用户登录信息在页面之间的传递，借助全局变量和局部变量可以实现

具体步骤 ：

我们以在首页中显示用户名和密码为案例，进行讨论

1、做元件准备

建立两个页面，命名为登录页面和首页；

在登录页面中拖入一个矩形，添加两个文本标签分别命名为“用户名”、“密码”；再添加两个文本框，将文本框分别命名为“username”、“password”，注意将password文本框的文本类型设定为“密码”；接下来添加一个提交按钮，命名为登录

最后在首页中，拖入一个矩形

2、添加全局变量，分别是username和 password； *** 作方法：项目——全局变量——添加全局变量——确定

3、为全局变量赋值，在这里我们会用到局部变量，由于用户唯一进行点击的是“登录”按钮，所以我们需要给登录按钮“鼠标单击时”添加交互

   首先分别为每个全局变量添加一个局部变量，将局部变量的元件文字值为登录页面输入的值，即借助局部变量，现将登录输入的数据传递到局部变量，再由局部变量传给全局变量

   点击添加动作下面的“设置变量值”—选择“username”——点击“fx”——插入局部变量——设置元件文字为“username”——确定，同理去设定全局变量password。

两个变量完成之后，点击“打开链接”——选择链接到首页

4、为首页页面添加交互，选择“页面载入时”——“设置文本”——“矩形”——“fx”——在全局变量中输入“用户名：，密码：”并插入对应的变量，如下图图九

就能实现变量值在页面中的传递

思考和总结：

要实现变量值在页面中的传递，主要是借助全局变量和局部变量，先设定全局变量，然后插入局部变量，将要传递的数据存入到局部变量，再由局部变量传给全局变量，实现传递。

自定义变量分为 局部变量 和全局变量。

局部变量： 只作用于某个部分，而非整体。

在空白处新增五个原型作为页签，其中第一个为灰底白字。全选右键【转换为动态面板】，命名为IndexPanel

复制为5个State，并修改不同状态页签的样式（第几个状态对应第几个序号的页签的样式为灰底白字）

新增一个文本标签，命名为StateIndex，状态设为隐藏。用于记录动态面板ImagePanel切换到的状态名称

① 【状态改变时】-【设置文本】-【StateIndex】-【面板状态，This】

② 【设置面板状态】-【IndexPanel】-【Value】-点击fx

【添加局部变量】，输入变量

---