Axure教程|如何制作返回顶部原型功能?

时间:2019-10-08

  1、在工作区拖入一个动态面板命名为top,根据通常返回顶部的按钮在屏幕右下角的惯例设置top的X坐标和Y坐标,并在状态1(stage1)里插入一张返回顶部的图片,然后将动态面板top设置“固定到浏览器”,最后设置为隐藏备用。

  2、再拖入一个动态面板命名为top_2,Y坐标与动态面板top一致,X坐标任意,但是不要与top重叠(我是直接将top_2放在了top的平行左边的位置),且top_2中不放入任何元件,然后将动态面板top_2设置“固定到浏览器”后备用。

  3、拖入一个热区命名top_rq,X坐标与动态面板top_2的X坐标一致,Y坐标等于动态面板top_2的Y坐标加上动态面板top_2的高度(热区top_rq的Y坐标的设置不固定,看你的动态面板top想在页面滑动到什么位置开始显示自定义设置),宽度与动态面板top_2的宽度一致,高度直接拖到页面最底部。

  5、设置控件交互(返回顶部)拖入一个矩形命名top_mark,位置放在动态面板top的初始位置(即覆盖住top)。然后对动态面板top设置鼠标点击时事件。在弹出的窗口中,逐步进行:

  6、这样一个”返回顶部“的效果就做好了。点击F5预览,然后向下滑动下鼠标,在屏幕右下角就会显示返回顶部的按钮了,当返回顶部后,这个按钮又会消失不见。

  本文由 纪梦旭(微信号:sailalone001) 原创发布于人人都是产品经理 ,未经许可,禁止转载。

  1、将这个返回顶部的按钮转换成动态面板,并设置固定浏览器窗口(靠右,离页面底部50像素)

  3、针对第一步设置的动态面板,设置一个单击事件,用例中选择滚动到锚点(选个热区),设置隐藏用例,将动态面板隐藏

  4、设置页面滚动事件,增加一个判断条件,当页面滚动到某个距离,如900像素时(或者设置接触线),在显示动态面板

  真个过程其实只需要一个返回顶部的动态面板和一个热区,设置相应的事件用例即可

  1、可以反过来设置为接触时隐藏,未接触时显示,这样不用将top_rp下拉至页面底部了,只需要短短的一条,并且可以适用各种高度的页面;

  2、可以将4个原件组合,在需要应用的页面上,直接黏贴过去,并将页面交互也黏贴过去(正因为页面交互是在每个页面单独设置的,所以没找到实现模版套用的方式)

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,温洲财神爷心水资料集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。


香港最快开奖现场记录| 香港六合现场开奖结果| 香港六合开奖结果直播| 六合商会| 90开奖直播中心| 六盒宝典心水论坛| 曾道中红姐开奖结果| 神算子| 185205.com| www.ok6667.com| 赢彩天下| 白小姐高手论坛844300|