【Axure笔记】8.如何使用url及变量链接页面并实现跳转
我们通过对一个按钮添加交互:点击时——打开链接——连接到——选择对应的页面,就可以很简单的实现跳页功能,这也是Axure里面用的最多的功能之一。
URL的格式是什么样呢?而细心的朋友可能发现在连接到中有一个连接到URL或文件路径的选项,我们点击后出现一个需要我们填值的空,如何通过填写这个值来实现跳页呢?
链接到:页面名+.html即可
其实做法很简单,如上图只需要在链接到下面填写对应页面的名字并在后面加上.html就可以了,我们用Axure自带的示例进行演示,文件中有“Tour”和“Mobile”两个页面,当我们点击Tour页面中“GO TO MOBILE PAGE”按钮时跳转到Mobile页面,我们当然可以用最简单的方法直接选择连接到Mobile页面,我们也可以选择连接到URL或文件路径,并在值中填写“Mobile.html”,这样的效果也是一样的。
【注意】使用URL跳页后所有的全局变量将会清空,因为系统认为当你使用URL打开页面时是新建的页面,将不会在这个“新页面”中保留原来的全局变量。
有些人可能会有疑问,为什么明明可以直接连接到页面,却要使用Url来进行连接呢?因为使用变量进行跳转的场景则更为丰富,例如我们有三个页面“Tour”“Mobile”“Share”,前两个页面之间都有通往Share的按钮,而Share页面作为一个全局页面只有一个返回按钮,如何让用户点击返回按钮时返回之前的页面呢?这就需要在返回按钮中使用变量URL了。
具体做法如下:
1.首先点击屏幕上方Axure菜单栏中“项目”——“全局变量”,新建一个名为“WhoCalledShare”(变量名可自定义,只要是英文都可以)。
2.回到Tour页面,在Share图标上面加热区(为什么使用热区而不直接在图标上编写逻辑?),并在热区中编写交互“点击时”——“设置变量值”——目标“WhoCalledShare”——设置为“值”——值点击fx——“插入变量和函数”——选择页面函数类中的“PageName”——确定完成;
设置变量值再添加“点击时”——打开链接——链接到“Share”,到这里我们实现了Tour页面在点击Share按钮时的变量赋值和跳页逻辑。
设置打开链接【注意:】请务必将跳页逻辑至于赋值逻辑之后,因为一旦跳页逻辑开始,跳页逻辑后所写赋值的逻辑将不再执行。
3.打开Mobile页面,重复在Tour页面中的操作,实现Mobile页面在点击Share按钮时的变量赋值和跳页逻辑。
4.打开Share页面,在BACK按钮上编写交互“点击时”——“打开链接”——链接到——链接到URL或文件路径——点击fx-插入变量和函数-选择“WhoCalledShare”——之后在后面加上.html——确认完成即可。
找到变量 添加.html尾缀 最终效果这样我们就实现了之前GIF图中通过变量和URL链接实现复杂的页面跳转的效果。
思考:通过URL跳转页面的方式虽然方便,但是会丢失全局变量,那么如何在保证不丢失全局变量的情况下也实现根据变量来跳转页面呢?其实也不难,设置返回按钮点击时命令的启用情形就好了,分别设置if WhoCalledShare == "Tour"时,链接到Tour页面和if WhoCalledShare == "Mobile"时链接到Mobile页面就好啦。
——————————————————文章目录——————————————————
Chapter 1
开始前的准备
Chapter 2
开始做吧,初学时懵逼的问题:
Chapter3
实战教程,未完待续...