全局变量实现跨页内容滚动

AxureRP8.0教程 小楼一夜听春语 2327℃ 0评论

今天周六,我依然还想工作...

所以,写下这篇教程,分享给大家。

我的这个很长,希望你们喜欢!

首先,我们看看要实现的效果是怎样的。

如果没看懂,那么,我来描述一下。

左侧是一个新闻列表页;右侧是新闻内容页,包含了列表中所有的新闻。

当点击左侧新闻列表页中的新闻标题时,页面跳转到新闻内容页,并将新闻内容页的内容进行滚动,将与被点击标题一致的新闻滚动到浏览器窗口的顶部。

因为涉及到跨页面的交互,那么,这个交互一定需要使用全局变量。

这里,我给大家讲两种实现方法的实现思路。

第一种:在新闻列表页点击新闻标题时,在全局变量中保存一个特定的值(例如新闻顺序编号),当打开新闻内容页时,对全局变量中的新闻编号进行判断,以便滚动到不同的新闻位置。例如:如果全局变量中保存的值为3,就让页面滚动到第3条新闻标题的位置。

第二种:在新闻列表页点击新闻标题时,在全局变量中保存新闻内容页中相同新闻标题的y轴坐标,当打开新闻内容页时,将一个用于定位的元件(例如:热区元件)移动到全局变量中所保存的y轴坐标位置上,最后滚动页面到定位元件的位置上。例如:如果第5条新闻所在的y轴位置是666,就先将定位元件移动到这个位置,然后,让页面滚动到这个元件所在的位置。

实际上,还有另外一种方法结合了上面两种思路以及函数,但是比较复杂,不建议使用。如果对函数有兴趣的同学可以参考本篇教程附件资源中的rp源文件。

好了,完成了思路分析,接下来我们就按这两种思路实现这个交互。

注意:本案例预览时浏览器窗口高度尽量调小,也就是保证浏览器窗口能够出现滚动条,以保证页面内容可以滚动(如果没有滚动条还滚个屁啊!)。

一、第一种思路的实现

1、首先,准备好新闻列表中的所有元件,然后逐一为每一个标题添加【鼠标单击时】的交互。

交互的动作有两个。

一个动作是【设置变量值】为新闻的顺序编号。这里我们需要在设置动作时创建一个全局变量,命名为“anchor”(蓝色线段部分的操作);然后,勾选这个全局变量,将它的值设置为一个顺序编号的数字。(此处以第一个新闻标题为例)

另外一个动作是【当前窗口】打开链接,页面选择新闻内容页。

每一个新闻标题都添加以上两个交互动作,例如第二个新闻标题的动作与第一个新闻标题的动作,只是设置变量值时的数字不同。

2、在新闻内容页的【页面载入时】,我们添加多个用例。每个用例都需要添加条件判断全局变量“anchor”中存入的数值,并通过【滚动到元件<锚链接>】的动作滚动页面内容。

注意:新闻内容页的标题元件都需要命名(title01~title08)。

添加条件(以第一个用例为例):

当符合以上条件时,我们就可以设置动作【滚动到元件<锚链接>】“Title01”。

因为有多个标题,所以我们需要添加多个用例,每个用例都重复以上步骤。

好长是吧?吓到了是吧?太长也会不舒服是吧?

没关系,我们采用第二种方法会简单的多!

二、第二种思路实现

这一种实现方式,需要在新闻列表页点击标题时,将【设置变量值】的值设置为新闻内容页相同新闻标题的y轴坐标。

以第3条新闻标题为例。

把每一条新闻标题【鼠标单击时】交互中的【设置变量值】动作逐一修改。

然后,打开新闻内容页,在页面中放入一个热区元件,位置随意摆放。

接下来,为这个热区元件添加两个动作。

第一个动作,【移动】热区元件【到达】指定的位置,这个位置的y轴坐标为全局变量“anchor”中保存的数值。

第二个动作,【滚动到元件<锚链接>】“当前元件”。

这两步的动作,实际上就是让热区元件移动到和目标新闻标题一样的位置,并以这个热区元件为定位元件滚动页面内容。

通过以上操作,就完成了这个案例的交互效果。

是不是比长的还要爽呢?

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站页面右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址https://www.axure.com.cn/product/training/。

源文件下载:【点击下载


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » 全局变量实现跨页内容滚动

喜欢 (33)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 不知为何没按照描点的位置跳转 ➡
    neal2018-03-22 19:55 回复