移动端菜单顶部吸附效果

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

大家先来看一个效果图,思考一下这个效果怎么实现?

图1

 

首先,移动端内容的上下滑动,只需要将相应内容放入动态面板,并在该动态面板属性中添加垂直滚动条即可。这样,当我们在手机上打开原型时,即可通过手指的拖动而上下滑动。动态面板的滚动条必须设置,但在手机浏览器中并不会出现滚动条。

注意,全屏内容上下滑动,需要将动态面板设置为标准尺寸(见图2),并在HTML设置中进行【移动设备】设置,勾选【包含视口标签】选项(见图3)。

图2

图3

然后,我们分析一下这个效果的交互过程。

1、交互什么时候触发?

答:动态面板内容滚动的时候。

2、分别有几种情形?

答:两种情形,一种是内容滚动超过指定的距离,一种是未超过指定的距离。

3、需要判断什么内容?

答:需要判断动态面板内容滚动的距离。

4、动态面板内容的滚动距离怎么获取?

答:通过系统变量“scrollY”。

好了,分析完毕,下面是实现过程。

  • 先准备元件。

页面中放入元件内容。分别是1个广告图片,3个制作菜单的矩形,N个三级标题和文本段落。把3个制作菜单的矩形,按着Ctrl键依次点击选中,然后,点击上方功能区中的【组合】图标或者快捷键<Ctrl+G>组合到一起,并命名为“MenuGroup”。最后,全选这些内容,点击鼠标右键,在菜单中选择【转换为动态面板】。(图4)

补充:转换为动态面板后,要把动态面板设置成上方提到的尺寸,例如360*640,并且,动态面板动态面板里面的内容超过动态面板的高度,否则不会出现滚动条。

图4

2、在动态面板的属性中,设置动态面板【自动显示垂直滚动条】。(图5)

图5

3、为动态面板添加交互。(图5)

一共包含2个用例(Case):

用例1:对动态面板滚动距离是否超过150进行判断,设置条件【值】【[[This.scrollY]]】【>=】【值】【150】。系统变量“This”表示当前元件,“scrollY”表示滚动距离。(图6)

图6

当符合以上条件时,我们需要【移动】菜单“MenuGroup”,【到达】x轴“0”/y轴“[[This.scrollY]]”的位置。“[[This.scrollY]]”就是动态面板内容滚动的距离,也就是动态面板内容滚动时,上边缘那一线内容的y轴坐标位置。在动态面板内容滚动时,将菜单“MenuGroup”移动到这个位置,就是将它时时移动到动态面板上边缘的位置,也就是顶部吸附效果。(图7)

图7

用例2:当不符合用例1的条件时,也就是动态面板内容的滚动距离小于150的时候,我们需要再填加一个用例2,即不符合条件的情形,并设置动作【移动】菜单“MenuGroup”,【到达】x轴“0”/y轴“150”的初始位置。

以上就是移动端菜单顶部吸附效果实现的分析与过程。大家不难发现,其实使用变量与函数并不复杂,关键在与知道函数的用途与使用方法。这些系统变量与函数的使用方法,在我编撰的一系列图书中(例如:Axure RP8实战手册)都有详细的讲解,大家可以阅读参考。

所以,原型中使用函数,旨在解决问题和提高效率,不要刻意去使用,也不要对其有偏见而放弃使用。

 

源文件下载地址:【点此下载】

 


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

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

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

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 移动端菜单顶部吸附效果

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 老师你好,我反复按教程做了好几遍,可最终预览的效果还是没有滚动条,实现不了教程的效果,请问这个要怎么解决?
    小圆干脆面2017-03-16 11:37 回复
    • 小楼一夜听春语
      转换为动态面板后,要把动态面板设置成上方提到的尺寸,例如360*640,并且,动态面板动态面板里面的内容超过动态面板的高度。
      小楼一夜听春语2017-03-16 12:08 回复
  2. 老师你好,我按照教程做了,尺寸也调好了,可是还是达不到教程的效果,我想问下,是在发布-预览里看制作效果嘛?
    小葵2017-04-13 14:47 回复
  3. 楼老师,矩形框的组合并命名编辑是不是只在axure8上会有效果?我在7上组合后也设置了单个形状绝对位置到(0,This.scrollY),但是没有吸顶效果,求答疑解惑~~
    数一数排骨2017-04-24 18:01 回复
    • 小楼一夜听春语
      一样的
      小楼一夜听春语2017-04-24 20:05 回复
      • 小楼老师,我按照教程也对比了您做的原型和函数,都是对的,为啥预览的结果不能吸附尼?求助~
        空觉么么哒2017-05-06 20:52 回复
  4. 感觉做出来交互不是很流畅呢,换了三个浏览器都是一样的效果,感觉跳一下跳一下的,然后下拉以后重新往上滑动,MenuGroup与顶部之间会有间隙,请问老师这是什么原因导致的呢?
    光头强的大老婆2017-05-15 15:11 回复
  5. 老师我不懂这个scroIIY
    m2017-05-27 16:17 回复
  6. 大神,一直想不明白,既然scrollY是获取滚动距离,为啥滚动距离>=150时,tab标签随面板移动;而滚动距离小于150时,固定在顶部?这个逻辑我想得是反的,但是效果可以实现,好奇怪~想不通,滚动距离小于150时,不是上边的banner图,还没有完全滚出页面么?怎么是这个时候固定呢
    2017-09-21 10:04 回复
    • Window.ScrollY指的是窗口当前纵向滚动的坐标值,不是距离。
      Synmo梦儿2017-09-22 17:29 回复
      • 大神 还是有点不明白 当左上角的坐标值为(0,0)时,实际上竖直滚动距离和Y轴坐标值是一个意思啊~~tab动态面板(或者说有变化的滚动距离)实际的活动位置是0~150啊,为啥会有>150的情况呢?
        2017-09-29 16:00 回复
  7. 我实现了哈哈,下载了源文件对照了下。
    春风忆童心2017-10-25 16:59 回复
  8. 150是顶部图片的高度,紧接着下面就是三个导航按钮,它的意思是滚动条高度滑到150的距离也就是滑到三个菜单正好在顶部的位置固定下来就不再往上滑了
    春风忆童心2017-10-25 17:00 回复