Axure正版代理
北京口耳相传科技有限公司旗下网站

Axure制作移动端菜单顶部吸附效果教程

axure培训

本文转载自小楼老师博客:http://www.iaxure.com/5342.html

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

图1

 

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

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

图2

图3

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

1、交互什么时候触发?

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

2、分别有几种情形?

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

3、需要判断什么内容?

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

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

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

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

  • 先准备元件。

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

图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中文网 » Axure制作移动端菜单顶部吸附效果教程

评论 21

评论前必须登录!

 

  1. #15

    用例1实在是理解不来,怎么想都应该是 【[[This.scrollY]]】【<=】【值】【150】,而不是大于等于。。但是小于等于做出来就是不对。。。。求大神解答下,谢谢~

    安静4周前 (10-25)
  2. #14

    太棒了,终于实现了

    粽子4周前 (10-25)
  3. #13

    菜单感觉滚动有延迟,滚下去一会后才回到顶端,没有演示的那么固定。

    Moona1个月前 (10-11)
  4. #12

    可以滚动,但是menugroup消失了,不知道怎么回事。

    Moona1个月前 (10-11)
  5. #11

    知识 变量的定义怎么知道呢,为什么滑动的距离用scrollY标识,这个规则在哪里定的?

    Mha2个月前 (09-28)
  6. #10

    效果是实现了。也明白了那个y轴0值 不是软件窗口的最顶部,而是内容的原始的顶部位置

    Mha2个月前 (09-28)
  7. #9

    大神,一直想不明白,既然scrollY是获取滚动距离,为啥滚动距离>=150时,tab标签随面板移动;而滚动距离小于150时,固定在顶部?这个逻辑我想得是反的,但是效果可以实现,好奇怪~想不通,滚动距离小于150时,不是上边的banner图,还没有完全滚出页面么?怎么是这个时候固定呢

    2个月前 (09-21)
    • 我给你想的是一模一样的。。。好神奇

      安静4周前 (10-25)
  8. #8

    两个问题:1.一直不明白150是代表什么意思(需要跟着做了,不过不明白这个参数的真实意思);2.我用矩形合并的菜单命不了名,而直接拖菜单组的就可以,不知道为什么?求大神解答下。谢谢!

    阿仙奴3个月前 (08-17)
    • 第一个问题:150是顶部图片的高度,紧接着下面就是三个菜单,它的意思是滚动条高度滑到150的距离也就是滑到三个菜单正好在顶部的位置固定下来就不再往上滑了
      第二个问题:三个矩形shirt都选中右键组合–命名即可,你再试试

      c2n53个月前 (08-24)
  9. #7

    按照教程可以实现效果。已经亲测。
    建议:说明一下MenuGroup需要设置为“至于顶层”。否则,滚动的时候,有可能被别的组件覆盖。

    vvvvvvvv4个月前 (08-03)
  10. #6

    求助大神,函数公式都是一样的,可是菜单怎么都不能吸附。

    simper7个月前 (05-06)
    • 移动MenuGroup,TO。注意To字

      vvvvvvvv4个月前 (08-03)
  11. #5

    我的是变成文字无限滚动(滚不完的那种),菜单导航则不见了

    tyro7个月前 (04-28)
  12. #4

    我做的为啥菜单顶端吸附后,再接着往下滚动,菜单会再次做一次吸附的动作,感觉菜单会跟着不断下滑而不断刷新显示

    dudu8个月前 (04-10)
  13. #3

    正是我想要寻找的实现效果

    dudu8个月前 (04-10)
  14. #2

    你好,为什么我向下滑动可以实现吸附,但是往回滑动的时候就回不去了?

    millercomeon8个月前 (03-30)
    • 我设置错误,找到问题了~

      millercomeon8个月前 (03-30)
  15. #1

    根本就不是全选所有内容转换动态面板,而是新建一个360*640的动态面板,将巨长的内容拖进去,然后menugroup组一定要在stat1下第一个,教程写成这样,太恶劣了。

    amos8个月前 (03-15)
    • 转换为动态面板之后,设置动态面板尺寸为360*640,这个尺寸在第二段中已经讲了,写在前面是特别强调,你理解不了的话,可以先学习一下关于动态面板的基础知识。最后说一下,教程不一定适合所有人,但这不代表教程恶劣,我们也会尽力改进。但是,你这种态度是对别人的不尊重,你可以不看不学,但是你连基本的礼貌都没有,这是缺乏家教。

      iaxure8个月前 (03-15)
    • 可以整体转换成动态面板再设置它的尺寸嘛!

      c2n53个月前 (08-24)

购买Axure RP正版授权 终身可用

购买专业版购买团队版