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

访客4年前黑客工具821

在实际应用中,全局变量起到了信息通报浸染和符号浸染,可以在多个页面间通报信息,可能作为非凡场景的判定依据。本文作者先容了如何用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教程:手把手教你APP下拉刷新效果

Axure教程:手把手教你APP下拉刷新效果

APP下拉刷新结果,即手机APP下拉界面界面时显示正在刷新/加载数据的提示文案,随后文案消失并在加载竣事时展示最新的APP界面。 前期筹备 软件:Axure 9.0 硬件:Windows/Mac电脑...

Axure教程:用中继器做手机版日期选择器和手机日历

Axure教程:用中继器做手机版日期选择器和手机日历

本日和各人分享怎么用中继器建造手机版的日历。该原型利用利便,可直接利用,并且交互齐全完善,所以推荐给各人利用。这期的内容,数学公式较量多,大概有些小同伴会不大白,喜欢原型可能有疑问的小同伴们可以在下...

Axure交互大全:Axure全交互模板及视频教程

Axure交互大全:Axure全交互模板及视频教程

编辑导读:本文作者为各人分享了一组Axure常用交互模板,作者从预览原型,到所需原件,再到操纵步调都一一展开了阐明,并对进程中需要留意的问题举办了先容,但愿对你有所开导。 我在指导粉丝设计原型的时候...

Axure教程:实现网易云音乐有声播放效果

Axure教程:实现网易云音乐有声播放效果

网易云音乐各人应该都有用,它的音乐播放结果不知道你是否有留意过。本文作者先容了如何用Axure实现网易云音乐有声播放结果的操纵步调,以及实现进程中的一些留意事项,与各人分享。 为了利便讲授,我们首先...

Axure教程:登录滑动拼图验证交互教学

Axure教程:登录滑动拼图验证交互教学

滑动拼图是互联网一种新的验证形式,被广泛应用在各种网站的登录、注册、找回密码。用户可以不需要填写复杂的验证码,而是用鼠标去拖动滑块便能通过验证。 下面为今日头条的滑动拼图验证,接下来将为大家讲解:...

Axure教程:中继器实现商品管理列表

Axure教程:中继器实现商品管理列表

本文通过一个商品管理的例子,来说明中继器怎么使用。在这个商品管理列表里面,我们要实现商品信息的分页展示、新增、修改、删除和排序功能。 中继器是axure里面非常重要的一个元件,通过中继器,可以实现数...