Axure教程:全局变量的应用——空页面的新增数据校验

访客4年前黑客工具781

在实际应用中,全局变量起到了信息通报浸染和符号浸染,可以在多个页面间通报信息,可能作为非凡场景的判定依据。本文作者先容了如何用Axure实现全局变量中空页面的新增数据校验成果的操纵步调,以及实现进程中的一些留意事项,与各人分享。

Axure教程:全局变量的应用——空页面的新增数据校验

当一个页面存在两种或多种状态内容时,可以思量用【全局变量】判定展示哪个状态页面。譬喻:音乐保藏列表页面的【空状态】和【有数据】展示的两种环境。

当用户没有保藏歌曲时,点击保藏导航进入保藏打点页面,为【空状态】页面。

当用户有保藏歌曲时,点击保藏导航进入保藏打点页面,为【有数据状态】页面。

即点击同一个按钮,在不消景象下,会展示差异内容可能跳转差异页面。

Axure教程:全局变量的应用——空页面的新增数据校验

一、实现道理

操作全局变量,在元件可能页面载入时,判定全局变量的值,按照差异的值,展示差异的内容可能跳转差异页面。

二、实现步调 1. 添加全局变量

点击顶部菜单【项目】-【全局变量配置】,添加一个全局变量,定名为collection(用来校验用户是否保藏的歌曲)。其默认值配置为0,代表没有保藏歌曲,为空状态页面。当数值为1时,代表用户有保藏歌曲。

Axure教程:全局变量的应用——空页面的新增数据校验

Axure教程:全局变量的应用——空页面的新增数据校验

2. 添加保藏图标按钮交互事件

1) 当保藏按钮为未保藏状态时,选中【保藏】图标按钮,添加【单击时】,配置保藏按钮状态为下一状态即已保藏,同时添加【配置全局变量】,方针为【collection】,值为【1】。

2)当保藏按钮为已保藏状态时,选中【保藏】图标按钮,添加【单击时】,配置保藏按钮状态为下一状态即未保藏,同时选择【配置全局变量】,方针为【collection】,值为【0】。具体设计如下图所示:

Axure教程:全局变量的应用——空页面的新增数据校验

3. 保藏页面元件配置

给保藏页面添加一个【动态面板】,定名为内容,添加两个状态,别离state1为空状态,state2为有保藏数据状态。

4. 添加交互事件

选中【内容】,添加【载入时】交互事件,添加条件,当全局变量【collection=0】时,该面板状态为state1;当全局变量【collection=1】时,该面板状态为state2;

Axure教程:全局变量的应用——空页面的新增数据校验

Axure教程:全局变量的应用——空页面的新增数据校验

5. 结果

配置完成后,即可实现用户在播放页点击保藏图标按钮保藏歌曲,查察保藏页面时,即可看到保藏页面有保藏的歌曲内容。

当用户在播放页再点击打消保藏图标按钮,此时再返回保藏页面时,看到保藏页面为空页面。

三、留意事项

保藏的歌曲内容是事先添加的你想要的歌曲,不会按照你保藏的哪一首歌曲就显示哪一首。

演示的结果,是展示有保藏和没保藏的交互结果。不能到达点击保藏一首,保藏页面就会新增保藏一首。

相关文章

Axure教程 | 云盘案例原型:文件管理(图片、视频、文档、音乐管理)

Axure教程 | 云盘案例原型:文件管理(图片、视频、文档、音乐管理)

今天和大家分享一个后台文件管理demo,包括图片管理、视频管理、音乐管理、文档管理和其它文件管理。这个demo也可以看做云盘、网盘的demo。 该原型交互效果齐全,使用也简单,只需要填写中继器表格即...

Axure教程:Web端登录、注册、找回密码原型设计

Axure教程:Web端登录、注册、找回密码原型设计

本文分享了Web端登录、注册、找回暗码原型设计。包括登录(短信登录、账密登录、扫码登录、三方登录)、注册(短信注册、账密注册、邮箱注册)和找回暗码(通过短信找回暗码、通过邮箱找回暗码),与各人分享!...

Axure教程:中继器实现朋友圈发布图文动态

Axure教程:中继器实现朋友圈发布图文动态

编辑导读:本文是关于Axure中继器的运用操纵,作者具体讲授了操作Axure中继器实现伴侣圈宣布图文动态的操纵流程,较量基本,供初学者参考进修。 实现的交互:模仿微信伴侣圈,选择图片,编辑文字的交互...

如何用Axure画出Web产品的列表组件:基础画法

如何用Axure画出Web产品的列表组件:基础画法

编辑导读:Web产物的单选组件在画原型的时候较量常见,所以产物司理有须要深入相识它的各类交互和对应的原型画法。本文作者从自身实践履历出发,分享了用Axure做出Web产物的列表组件的基本画法,供各人一...

Axure教程:顶部导航光标定位

Axure教程:顶部导航光标定位

当鼠标移入顶部菜单时,菜单顶部有光标跟随,当移出时,光标自动回到当前页面菜单位置。这种效果应该怎么实现呢? 如下图: 顶部导航光标定位 线上效果图,查看: 制件方法 1. 页面与导航栏制作 按平时...

Axure教程:这几个小技巧你一定要知道

Axure教程:这几个小技巧你一定要知道

编辑导读:Axure是产物司理在事情中最常用到的软件之一,尽量它的利用范畴很是遍及,可是有一些小能力许多人并不知道。本文作者总结了Axure在利用中的一些小能力,与你分享。 一、Axure建造页面,...